tag:blogger.com,1999:blog-80380606658226301542024-03-05T21:30:43.819-08:00Hoctro's Archived Blog - Trang Lưu Trữ Học TròThis blog contains most of my previous posts from hoctro.blogspot.comHoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comBlogger32125tag:blogger.com,1999:blog-8038060665822630154.post-12065315956698518022023-06-16T21:53:00.002-07:002023-06-16T21:53:56.004-07:00Google Translate!<p> Bạn,</p><p>Google Translate thật tài ba, không những nó giúp mình dịch, mà mình có thể tải lên một tài liệu dạng doc hay pdf, dưới 10MB, và dưới 400 trang nó sẽ dùng AI dịch và gửi về doc hoặc pdf cho mình tải về !!!</p><p>Cái lợi nhất là cho việc học. Nếu mình viết bản gốc bằng tiếng Việt, rồi nói nó dịch qua thứ tiếng mình muốn học, mình rất dễ nhận diện từ vựng mới của bản dịch, vì mình đã rành rọt chữ mình viết xuống từ bản gốc:</p><p>Pháp:</p><p><a href="https://drive.google.com/file/d/1tKvC9hc3UbGYqBbBHpeG-jRyYXaHa6z8/view?usp=drive_link">https://drive.google.com/file/d/1tKvC9hc3UbGYqBbBHpeG-jRyYXaHa6z8/view?usp=drive_link</a></p><p>Ý:</p><p><a href="https://drive.google.com/file/d/1cRlV6CEnxceyYGgeyhV-8z2g8FTqQeox/view?usp=drive_link">https://drive.google.com/file/d/1cRlV6CEnxceyYGgeyhV-8z2g8FTqQeox/view?usp=drive_link</a></p><p>Anh Mỹ:</p><p><a href="https://drive.google.com/file/d/118D-9nH4eehl_z6AVrGrSrlbeXHnfH1p/view?usp=drive_link">https://drive.google.com/file/d/118D-9nH4eehl_z6AVrGrSrlbeXHnfH1p/view?usp=drive_link</a></p><p>Việt:</p><p><a href="https://drive.google.com/file/d/1VOuLpSKrRBLvBeisLM-aSbaYEsks-IlS/view?usp=drive_link">https://drive.google.com/file/d/1VOuLpSKrRBLvBeisLM-aSbaYEsks-IlS/view?usp=drive_link</a></p><p><br /></p><p>Thí dụ:</p><p><span style="font-family: "Times New Roman", "serif";"><span style="font-size: medium;">Quyển ebook bạn sắp xem là <b>tuyển chọn</b> lại những
<b>bài viết </b>và mà tôi đã <b>đăng rải rác</b> trên liên mạng và trên trang blog từ năm
2006 đến năm 2019. <b>Từ khi</b> sách Ebook này
chào đời đến nay là tái bản lần thứ bảy.</span></span></p><p><span style="font-family: "Times New Roman","serif"; font-size: 16.0pt; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">thì tiếng Ý là:</span></p><p><span style="font-family: Times New Roman, serif; font-size: medium;">L'ebook che state per vedere è una <b>selezione</b> di <b>articoli </b>che ho <b>pubblicato</b></span></p><p><span style="font-family: Times New Roman, serif; font-size: medium;"><i>sparsi </i>per internet e sui blog dal 2006 al 2019. Da <b>quando</b> è nato questo</span></p><p></p><p><span style="font-family: Times New Roman, serif; font-size: medium;">Ebook, è la <b>settima edizione.</b></span></p><p><br /></p><p>Mời vào trang này để tải văn bản lên cho Google Translate nó dịch:</p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizrfGsVd4vG3DhKSPQM8BNSV54txpurYABt76yEC1DUNTwJ2aZJzWGjqoIMc9X7CqX8-nZAlEnN5cpzNUeyT8tq35VA_qmWHrzMQMullsPDPYv8lkmu1A_049wL5lMz0d_SW4rCVPscY4NbKxcgExIuMR32r10Dfrx18v4xfZLuI9BwXphIblL5d2NSw/s1080/Capture.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="473" data-original-width="1080" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizrfGsVd4vG3DhKSPQM8BNSV54txpurYABt76yEC1DUNTwJ2aZJzWGjqoIMc9X7CqX8-nZAlEnN5cpzNUeyT8tq35VA_qmWHrzMQMullsPDPYv8lkmu1A_049wL5lMz0d_SW4rCVPscY4NbKxcgExIuMR32r10Dfrx18v4xfZLuI9BwXphIblL5d2NSw/w480-h210/Capture.JPG" width="480" /></a></div><br /><p><br /></p><p><span style="font-family: "Times New Roman","serif"; font-size: 16.0pt; mso-ansi-language: EN-US; mso-bidi-language: AR-SA; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"> </span></p><p><br /></p><p><br /></p><p><br /></p><p><br /></p><p><br /></p><p><br /></p><p><br /></p>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-76218850399096758862008-09-19T05:58:00.010-07:002008-12-09T07:35:15.303-08:00Archived Post: Adding Google Text Search Utility with Custom Tab Results<br/><br/>Dear Friend,<br /><br />Google Search itself with tabs turns out to be a straight-to-the-point tool, allowing readers to have many tabs to choose results from the same (one) search entry. Based on a request from Phoenix, one of my readers, I have modified the lately revised post on Ajax Search API, yet again, for you to install only this core functionality.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi75g78H55qDnAuPfOusttp08f8vK2U-6qoS_AgFi6ITdr8hlwj6zzitWASSw88H9IM-2_fmv6tWMQk21eCTuq_w5uqRTKfsTuCfshxolpXP9g4Cfecr3QuHqPSbk9MbDcMkpcNKiTrRN4/s1600-h/search2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi75g78H55qDnAuPfOusttp08f8vK2U-6qoS_AgFi6ITdr8hlwj6zzitWASSw88H9IM-2_fmv6tWMQk21eCTuq_w5uqRTKfsTuCfshxolpXP9g4Cfecr3QuHqPSbk9MbDcMkpcNKiTrRN4/s400/search2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5007776797853551714" /></a><br /><i>A simple Google Search on my blog gives results from many different sources</i> <br /><br />Here are the simple instructions:<br /><br /><span style="font-weight:bold;">Step 1:</span> Get the API key from <a href="http://code.google.com/apis/ajaxsearch/signup.html">http://code.google.com/apis/ajaxsearch/signup.html</a>. It's quite simple to get one, really.<br /><br /><span style="font-weight:bold;">Step 2:</span> Add the CSS and code to the header, right after the <span style="font-weight:bold;">] ] ></b:skin> </span>tag.<br />Replace the text in bold in 2 places with you own API key.<br /><br /><font color="brown"><br /> <script <br /><br />src='http://www.google.com/maps?file=api&amp;v=2&amp;key=<span style="font-weight:bold;">wW9cday6o7K3g</span>' type='text/javascript'/><br /> <script <br /><br />src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=<span style="font-weight:bold;">wW9cday6o7K3g</span>' type='text/javascript'/><br /> <link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/><br /> <link href='http://www.google.com/uds/css/gsearch_darkgrey.css' rel='stylesheet' type='text/css'/><br /><br /><style type='text/css'><br />/* primary colors */<br />.app_gsvsc { color : rgb(153, 170, 221); }<br />.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }<br />div.search-form-save_gsvsc { color : #202020; }<br /><br />/* selected tag */<br />div.tag-selected_gsvsc { color : rgb(170, 221, 153); }<br /><br />/* hover colors */<br />div.more_gsvsc:hover { color : rgb(170, 221, 153); }<br />div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }<br />.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }<br />.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }<br />.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }<br /><br />/* secondary colors */<br />div.more_gsvsc { color : rgb(204, 204, 204); }<br />div.tag-control_gsvsc { color : rgb(204, 204, 204); }<br />.searchForm_gsvsc { color : rgb(204, 204, 204); }<br />.search-form-input_gsvsc { color : rgb(204, 204, 204); }<br />td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }<br />div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }<br />.footerBox_gsvsc a { color : rgb(204, 204, 204); }<br />.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }<br />div.edit-tag_gsvsc { color : rgb(204, 204, 204); }<br /><br />/* special settings, not called out in standard color overrides */<br />.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }<br />.results_gsvsc div.video-result_gsvsc { border-color : #000000; }<br />.search-form-input_gsvsc {<br />color : #676767;<br />background-color : #e0e0e0;<br />}<br />.gsc-control {<br /> width: 100%;<br />}<br /><br /></style><br /> <script type='text/javascript'><br /> var coreSearch;<br /><br /><br /> function SolutionLoad() {<br /><br /> var controlRoot = document.getElementById("searchControl");<br /><br /> // create the search control<br /> coreSearch = new GSearchControl();<br /> coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);<br /> coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);<br /><br /> // prep for decoupled search form<br /> var searchFormElement = document.getElementById("searchform");<br /> var drawOptions = new GdrawOptions();<br /> drawOptions.setSearchFormRoot(searchFormElement);<br /> drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);<br /><br /> // populate - web, this blog, all blogs<br /> var searcher = new GwebSearch();<br /> searcher.setUserDefinedLabel("The Web");<br /> coreSearch.addSearcher(searcher);<br /><br /> searcher = new GblogSearch();<br /> searcher.setUserDefinedLabel("Blogsphere");<br /> coreSearch.addSearcher(searcher);<br /><br /> searcher = new GblogSearch();<br /> searcher.setSiteRestriction("<span style="font-weight:bold;">http://hoctro.blogspot.com/</span>");<br /> searcher.setUserDefinedLabel("<span style="font-weight:bold;">Hoctro's Place</span>");<br /> coreSearch.addSearcher(searcher);<br /><br /> searcher = new GblogSearch();<br /> searcher.setSiteRestriction("http://googleblog.blogspot.com/");<br /> searcher.setUserDefinedLabel("Google Blog");<br /> coreSearch.addSearcher(searcher);<br /><br /> searcher = new GwebSearch();<br /> searcher.setSiteRestriction("http://www.blogger.com/");<br /> searcher.setUserDefinedLabel("Blogger");<br /> coreSearch.addSearcher(searcher);<br /><br /> coreSearch.draw(controlRoot, drawOptions);<br /><br /> }<br /><br /> function doCoreSearch(q) {<br /> coreSearch.execute(q);<br /> }<br /><br /><br /> registerLoadHandler(SolutionLoad);<br /><br /> function registerLoadHandler(handler) {<br /> var node = window;<br /> if (node.addEventListener) {<br /> node.addEventListener("load", handler, false);<br /> } else if (node.attachEvent) {<br /> node.attachEvent("onload", handler);<br /> } else {<br /> node['onload'] = handler;<br /> }<br /> return true;<br /> }<br /> </script><br /><br /></font><br /><br /><span style="font-weight:bold;">Step 3: Add these new 2 widgets to your blog</span>, following instructions <a href="http://hoctro.blogspot.com/2006/11/hacking-technique-how-to-modify-beta.html">here</a>, section B.4.<br /><br /><font color="brown"><br /><b:widget id='HTML41' locked='false' title='Search Bar' type='HTML'><br /><b:includable id='main'><br /> <b:if cond='data:title != ""'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <div id='searchform'>Loading...</div><br /> </div><br /> <b:include name='quickedit'/><br /></b:includable><br /></b:widget><br /><br /><b:widget id='HTML42' locked='false' title='' type='HTML'><br /><b:includable id='main'><br /> <b:if cond='data:title != ""'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <div id='searchControl'>Loading...</div><br /> </div><br /> <b:include name='quickedit'/><br /></b:includable><br /></b:widget><br /><br /></font><br /><br /><span style="font-weight:bold;">Step 4: Move around the two just installed widgets, (one for the input of the search, one for the result) in Page Elements</span>. This is how we have a little freedom in moving the search widgets around if need be. <br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkMuCfTQzOzNttzBIIH_qkwyF26bZbwcZhyphenhyphenVgzy8u9JTsZtwNMgfMTzE96OaLQlGeCLpWV1RHeT0G3bqMRKH7zoCXGoT_FRYoAR3Jm9hCWUGLhXVAArXfHvj4BSqTM4F9o7vh07lx68_k/s1600-h/search3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkMuCfTQzOzNttzBIIH_qkwyF26bZbwcZhyphenhyphenVgzy8u9JTsZtwNMgfMTzE96OaLQlGeCLpWV1RHeT0G3bqMRKH7zoCXGoT_FRYoAR3Jm9hCWUGLhXVAArXfHvj4BSqTM4F9o7vh07lx68_k/s400/search3.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5007778683344194674" /></a><br /><br />Notice sometimes you'll see this prompt, don't worry, just click OK.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/1410/800/1600/963225/api2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/1410/800/400/610250/api2.jpg" border="0" alt="" /></a><br /><br />Notice I could even have a tab as my blog to show the results of the search you are looking for. You could replace my blog with yours by changing the two bold texts to reflect the name and the location of your blog/webpage.<br /><br /><font color="brown"><br /> searcher = new GblogSearch();<br /> searcher.setSiteRestriction("<span style="font-weight:bold;">http://hoctro.blogspot.com/</span>");<br /> searcher.setUserDefinedLabel("<span style="font-weight:bold;">Hoctro's Place</span>");<br /> coreSearch.addSearcher(searcher);<br /></font><br /><br />That's it! We're done!<br /><br /><br />Cheers,<br /><br />Hoctro<br />10 December 2006<br />Blog: http://hoctro.blogspot.com/<br /><br /><hr/>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-91856662445213990042008-09-19T05:58:00.006-07:002008-09-22T06:10:08.777-07:00Archived Post: Understanding the New Blogger Template<br/><br/>Dear Friend,<br /><br />In an effort to document the inner working of the new Beta templating system, I will try to explain to you in slightly-above everyday language how it works. In my opinion, the new templating system is more straight-forward than the classic one, in that it uses simple logic such as the <span style="font-weight:bold;">b:if</span> and the <span style="font-weight:bold;">b:loop</span>; but more importantly, it allows the seamlessly mixing of code between Beta and JavaScript, thus provides new possibilities in generating interesting templates.<br /><br />I assume my target audience has only the very basic knowledge of the code of a simple HTML, and some very basic knowledge of what is an <span style="font-weight:bold;">if statement</span>, or a <span style="font-weight:bold;">loop statement</span>, in general (I will review what it means though, so don't be scared.) If you know a little bit about CSS, that's great too, but it is not required - since I don't know much either, aside from some simple tweakings of existing CSS code.<br /><br /><span id="fullpost"><br /><span style="font-weight:bold;">1. How Things Work</span><br /><br />I remember the first time I ever wrote a simple HTML file. It's really nice to see that you can write something on the body part, and it shows/renders on the page right away. If I put a pair of <b> and </b> around that text, it becomes a bold text, and so on. Then, as I create more and more documents, I have to make links for the user to click on them to jump to other articles.<br /><br />The problem is, every time I create a new file, I have to go back to every single of my existing files to add a link to this new file. Not only that, if I want to change my site's visual look, I have to edit all these files without exception. You could imagine how chaotic and inconsistent of these files' code after a while.<br /><br />Templating system to the rescue! Imagine that you have a file that would take care of all the nitty-gritty of maintaining links to all the posts, yet powerful enough so that a simple change to this file such as the site's title would update all the files to appear with the same new look. Well, Blogger Classic did just that, and its users are quite happy with this templating design, along with its free hosting service. (Didn't Blogger just celelebrate its seven-years-in-existence a month ago?)<br /><br />To be fair, Blogger is probrably not the first nor the only solution out there that offers its users this kind of templating. But along with the new Blogger Beta, the much anticipated templating design does follow Goggle's <span style="font-weight:bold;">simplicity trademark</span> by providing a more simple, XML (almost)-compliant version, yet flexible enough that you can extend its functionalities by allowing integration with JavaScript. <br /><br /><span style="font-weight:bold;">2. Beta's template is a HTML file</span><br /><br />Let us now looking at Blogger's Beta template by unfolding one layer at a time its very basic structure. To so this, I save one of its design to my desktop, then drag it onto Internet Explorer, and click on the minus (-) red symbols at the front of several div tags until I reach this basic level as seen below,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/groundup1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/groundup1.jpg" border="0" alt="" /></a><br /><br />I will not go into details here but will only touch on the basic facts. First of all, this is a XHTML file. It has the xml tag at its very fisrt line, with an encoding parameter UTF-8. This is very important, it means I can store both ASCII (western) characters, as well as other unicode characters such as Vietnamese one. This is great, because it allows me to target two audiences while sharing the same internal working and filing system.<br /><br />As with any HTML file, our template has a head section, and a body section. The head part is for showing the file's title, storing the CSS code, and some common scripting functions, if any. The body is for storing instructions on how to display/undisplay widget elements, as we shall review next.<br /><br />One important fact to point out is, even at this high-level design, as with any well thought-out system, we have already seen a basic software engineering design of "<span style="font-weight:bold;">separating of concerns</span>." Indeed, the CSS part - controlling the look of the site, is separated from the logical code in the body part. The body should not have any instructions on how to layout the visual look of the webpage.<br /><br />Because this is a XHTML file, users whom are familiar with HTML know right away on how to use HTMl tags. More important, if you're not follow the HTML rules, your website will not work at all! This XHTML compliant feature gives a strong clue on how to make the template runs indeed. It's either worked or not worked, and nothing in between.<br /><br /><span style="font-weight:bold;">3. The head section</span><br /><br />As noted above, the head has nothing more than the title's name, CSS instructions, and some JavaScript functions.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/groundup2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/groundup2.jpg" border="0" alt="" /></a><br /><br />Based on <a href="http://help.blogger.com/bin/topic.py?topic=9083">Beta's online Help</a>, a <span style="font-weight:bold;">b:include</span> tag allows us to run something with the function named <span style="font-weight:bold;">all-head-content</span>. My best guess is that, after this line, you can start to access global variables such as the homepage's blog name, its url, and some other common data, as specified in the <a href="http://help.blogger.com/bin/answer.py?answer=47270&topic=9084">Layout's Data Tags</a> online document.<br /><br />Indeed, the title uses the blog's page title for showing in the upper left corner of the viewer's browser.<br /><br /> <title><br /> <data:blog.pageTitle /> <br /> </title><br /><br />Inside the skin tag, there are CSS instructions, as well-documented in the help article entitled <a href="http://help.blogger.com/bin/answer.py?answer=46871&topic=9084">Fonts and Colors Tags for Layouts</a><br /><br />If you wish to add JavaScript code, then put them right before the </head> tag. You probably have seen some (if not most) of my hacks use this appending approach.<br /><br />As for the body section, there are so much to discuss about, indeed. In my next article, I will start to peel off and discuss each layer of the body section at a time. Stay tune.<br /><br />Cheers,<br /><br />Hoctro (9/26/2006)<br />Blog: http://hoctro.blogspot.com/<br /><br /></span><br /><br /><br /><br />***************<br /><br /><br /><br/><br/>Dear Friend,<br /><br />Following what have been left off from the <a href="http://hoctro.blogspot.com/2006/09/beta-template-from-ground-up-top-down.html">first article </a>in the series, this time I will talk about <span style="font-weight:bold;">the body section</span>. As you will see, the beta template contains both ordinary HTML tags such as <div> and <span> and special tags of its own such as <b:includable> or <b:if>. But first, a little explanation on an important XML/XHTML rule.<br /><br /><span id="fullpost"><br />Nowadays, the two acronyms HTML and XHTML mean almost the same thing: a tagged document that can be shown on any modern browser such as Firefox or IE6. But the "X" in front of "HTML" means that this is a well-formed XML document. What does this means? It means that the tags are (almost) always come in the form of a pair of tags, an opening one, and a closing one. For example, this is a correct XML pair: <div> and </div>. The backlash "<span style="font-weight:bold;">/</span>" in front of a tag always represents the equivalent closing tag. Usually, in between these two tags, there are either texts or more well-formed tags.<br /><br />In some cases where the tag is self-sufficient, a "<span style="font-weight:bold;">/</span>" is always added at the end, right before the <span style="font-weight:bold;">></span> sign. An example would be the new-line tag: <span style="font-weight:bold;"><br /></span><br /><br />Since the new beta template is a well-formed document as declared by its very first line:<br /><br /><span style="font-weight:bold;"><?xml version="1.0" encoding="UTF-8" ?> </span><br /><br />the template must obey the well-formed characteristic of an XML document. This is both a good thing and not-so-convenient thing. The good thing is that being a well-formed document, it is going to be much easier for desktop or web programs to be able to read in and process data in an expected manner, using shared and/or open source parser programs. The bad thing is, amateur web coders will have much tougher time trying to write/hack a decent program and not missing a > sign, a closing tag, or mixing tags together in an unorder fashion.<br /><br />But enough of XML definitions. Let us take a look at what is inside the next level down of the body tag.<br /><span style="font-weight:bold;"><br />Div Tags, more div tags, and some more div tags</span><br /><br />After clicking on the pluses and minuses while opening the template inside IE6 for a while, this is what I have:<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/groundup2-1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/groundup2-1.jpg" border="0" alt="" /></a><br /><br />If you try to ignore the "div" tags and some other minor tags, but concentrate on the <span style="font-weight:bold;">id</span>s, you will see that the body section is made up of these main components:<br /><br /><span style="font-weight:bold;">*outer-wrapper<br /><br />---header-wrapper<br /><br />---content-wrapper<br />......<span style="font-style:italic;">main-wrapper</span><br />......<span style="font-style:italic;">sidebar-wrapper</span><br /><br />---footer-wrapper<br /></span><br /><br />Basically, what we have is a header section, a content section composed of a main and a sidebar, and a footer section. Sound familiar? Have you seen this layout visually before? Of course you did!<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/groundup2-2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/groundup2-2.jpg" border="0" alt="" /></a><br /><br />As you can see, the Page Element follows very closely, and in fact it is the visual representation of the textual template!<br /><br />Knowing this one-to-one relationship, now you can start to understand why and how a three-column template can be made: by adding a new <span style="font-weight:bold;">sidebar-wrapper div </span>to the <span style="font-weight:bold;">content-wrapper section</span>. The same concept apply if you want a 4 or 5 column template.<br /><br />Here is the <a href="http://blogger-beta-from-ground-up.blogspot.com/2006/09/it-works.html">link</a> to my own solution illustrating how to quickly add a new column. This solution is never added to my official hacks, since my friend Ramani has already found out how to do it far earlier time than I did and <a href="http://hackosphere.blogspot.com/3006/09/3-column-templates-for-blogger-beta_01.html">publish also the solution </a>on his site.<br /><br /><span style="font-weight:bold;">What's next</span><br /><br />But wait a minute! Where are the two rectangulars (<span style="font-weight:bold;">Blog Archived</span> and <span style="font-weight:bold;">About Me</span>) represented textually inside the template, you ask?<br /><br />It's there, of course, just one level down. <br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/groundup2-3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/groundup2-3.jpg" border="0" alt="" /></a><br /><br />These beta tags will be our focus point of the next article.<br /><br />Have a wonderful day and see you next time.<br /><br />Hoctro (9/28/2006)<br />Blog: http://hoctro.blogspot.com/<br /></span><br /><br /><br />*************<br /><br /><br /><br /><br />Dear Friend,<br /><br />Continuing on our quest of understanding the new Blogger in Beta template upside down, inside and out, top-down approach, and so on :-) this time we will take a closer look at how Blogger's data could be seamlessly embedded inside regular HTML tags, and as a consequence, proving that any exiting CSS blogging template could be retooled to work with the new Beta template system. <br /><br />Here is the picture I showed you at the end of the previous article,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/groundup2-1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/groundup2-1.jpg" border="0" alt="" /></a><br /><br /><br />We've got that far without revealing any blogger tags. Using the same technique of hiding and displaying the div, this time I uncover the next level. I also added all possible widgets that Blogger offers. Here is the result,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/fulltemplate.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/fulltemplate.jpg" border="0" alt="" /></a><br /><center>(Click on the picture to enlarge it)</center><br /><br />It looks kind of more complex, but still understandable somewhat, right? Underneath each of the "<span style="font-weight:bold;">xxxx-wrapper</span>" tags, there is one <span style="font-weight:bold;">b:section</span> tag. Under each of this special tag, there are one or more of the widget tags, each with its own identification and other things. Now if I click on the + sign of each widget, I will get to see the actual beta coding for this widget. But those internal code would be the subjects of many follow-up articles. The scope of this article is therefore limited to only discussing about the two levels that i've just mentioned, namely <span style="font-weight:bold;">b:section</span> and <span style="font-weight:bold;">b:widget</span>.<br /><br />The equivalent visual representation of the code I just show you would be like this,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/arrange.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/arrange.jpg" border="0" alt="" /></a><br /><br />and when you view the blog in action, it would look like this,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/web.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/web.jpg" border="0" alt="" /></a><br /><br />Next, let us discuss about each section - the header, the main post area, the sidebar, and the footer - in details. <br /><br /><span style="font-weight:bold;">1. The Header Section</span><br /><br />In this section, we know that it has to somehow show the title and the description of the blog. Because there is only one widget, those info must reside in it. But first, there are also other information and/or settings as part the header section,<br /><br /><br /><font color="brown"><br /> <div id='header-wrapper'><br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='brand new blog (Header)' type='Header'/><br /> </b:section><br /> </div><br /></font><br />We see that a section has a class, and we have four classes representing four sections. They are the header, the main, the sidebar, and the footer classes. (Also, according to Blogger, at runtime each b:section will become a div, so you could use your CSS markup to enhance the look of those.) The section also has its own id, namely "header". The parameter <span style="font-weight:bold;">maxwidgets="1"</span> signifies that there is only one widget that could be added to this section. The parameter <span style="font-weight:bold;">showaddelement="no"</span> means that you will not see a "Add a Page Element" box in this section. (Why need it when you already set the max widget to be of one widget only?)<br /><br />Inside the <span style="font-weight:bold;">b:section</span>, there is only one widget, with the id of "Header1". The parameter <span style="font-weight:bold;">locked="true"</span> means that you cannot drag this widget to anywhere else. The title on the widget to be shown in the box of the layout (and not our real web page) was the next parameter, while the last parameter tells Blogger this is a header type. <br /><br />We will explore the contents of this widget in another article.<br /><br /><span style="font-weight:bold;">2. The Main Section</span><br /><br />The Main section obviously is for displaying the contents of a page. This varies drastically, from one post only to possibly every posts in the blog. Even for the "one item" case, there are a lot of information to display, such as the time created, the title of the post, the contents, all the comments for the post, backlinks, navigation system, etc. In the "Expand Template" view, the portion of the code is about 80% (not counting CSS code)! This section probably is the one that scares off people from looking into tweaking the template to suit their sites. But it doesn't have to be that way. One could just ignore the section and only revisit it when they feel more confident.<br /><br />Below is the code for the section in simplified form,<br /><font color="brown"><br /> <div id='main-wrapper'><br /> <b:section class='main' id='main' showaddelement='no'><br /> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br /> </b:section><br /> </div><br /></font><br /><br />As you can see, under the <span style="font-weight:bold;">(id = ) main</span> section, there is only one widget named <span style="font-weight:bold;">Blog1</span>, with other minor parameters similar to the Header section.<br /><br /><span style="font-weight:bold;">3. The Sidebar section</span><br /><br />Hopefully, by now you are already feel at home with identifying where is the section tag and all the widget tags it contains. I purposedly attach every single Page Element that Blogger offers with the "Add Page Element" option to show you the syntax of each widget. As you can see, the parameters are pretty much self-explanatory, as one can easily guess which widget corresponds to which line of code. If you happen to want two widgets of the same type, just make sure they have <span style="font-weight:bold;">unique IDs</span>, such as <span style="font-weight:bold;">Label1</span> and <span style="font-weight:bold;">Label2</span>, and you will be fine.<br /><br /><font color="brown"><br /> <div id='sidebar-wrapper'><br /> <b:section class='sidebar' id='sidebar' preferred='yes'><br /> <b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/><br /> <b:widget id='Label1' locked='false' title='Labels' type='Label'/><br /> <b:widget id='Feed1' locked='false' title='Hoctro"s Place' type='Feed'/><br /> <b:widget id='HTML1' locked='false' title='html code' type='HTML'/><br /> <b:widget id='Text1' locked='false' title='a text' type='Text'/><br /> <b:widget id='Image1' locked='false' title='pic' type='Image'/><br /> <b:widget id='LinkList1' locked='false' title='link list' type='LinkList'/><br /> <b:widget id='TextList1' locked='false' title='list' type='TextList'/><br /> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/><br /> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/><br /> </b:section><br /> </div><br /></font><br /><br />Again, I will get into details of these widgets one by one, hopefully in the next article.<br /><br /><span style="font-weight:bold;">4. The Footer section</span><br /><br />There is no special about this section at all, except for the fact that when the section has no widget, it appears in just one line, like so <span style="font-weight:bold;"><b:section .... /></span><br /><font color="brown"><br /> <div id='footer-wrapper'><br /> <b:section class='footer' id='footer'/><br /> </div><br /></font><br /><br /><span style="font-weight:bold;"><br />5. What makes it so great about Beta Templates?</span><br /><br />We are at the end of our little trip of visiting the sections and widgets at their simplest form. The great thing about the code I've just shown you is that <span style="font-weight:bold;">it's not there for nothing, it actually works</span>. Indeed, if you have any new template with this kind of simplified Blogger code, then cut-and-paste that code into the <span style="font-weight:bold;">HTML Edit</span> window and save it, it would show you a blog, however simple or complex you want it to be.<br /><br />This fact is very important if you want to start creating <span style="font-weight:bold;">customized beta templates</span> for yourself and for others. You don't have to cut-and-paste the long form and try to fit it in a well-designed, existing HTML design. You can simply embed the internal (whatever inside and including of the two <span style="font-weight:bold;">b:section</span> tags) of the four sections I described above to the proper locations in your design, and your blogger data will magically show up! Only then, you start to tweak your CSS design to match the divs' names of the Blogger sections for the text to show correctly.<br /><br />I will prove this point to you right away.<br /><br />First, create a new test blog, then go to Template->Edit HTML. Save your current design to your desktop, then cut and paste this code below,<br /><br /><font color="brown"><br /><?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><br /> <head><br /> <b:include data='blog' name='all-head-content'/><br /> <title><data:blog.pageTitle/></title><br /> <b:skin><![CDATA[<br /> <br />/* Variable definitions<br /> ====================<br /> <Variable name="bgcolor" description="Page Background Color"<br /> type="color" default="#fff" value="#ffffff"><br /> <Variable name="textcolor" description="Text Color"<br /> type="color" default="#333" value="#333333"><br />*/<br /><br />body {<br /> background:$bgcolor;<br /> margin:0;<br /> color:$textcolor;<br /> font:x-small Georgia Serif;<br /> font-size/* */:/**/small;<br /> font-size: /**/small;<br /> text-align: center;<br /> }<br /><br />]]></b:skin><br /> </head><br /> <body><br /> <div id='outer-wrapper'><div id='wrap2'><br /><br /> <!-- skip links for text browsers --><br /> <span id='skiplinks' style='display:none;'><br /> <a href='#main'>skip to main </a> |<br /> <a href='#sidebar'>skip to sidebar</a><br /> </span><br /><br /> <div id='header-wrapper'><br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='brand new blog (Header)' type='Header'/><br /> </b:section><br /> </div><br /> <br /> <div id='content-wrapper'><br /><br /> <div id='main-wrapper'><br /> <b:section class='main' id='main' showaddelement='no'><br /> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/><br /> </b:section><br /> </div><br /><br /> <div id='sidebar-wrapper'><br /> <b:section class='sidebar' id='sidebar' preferred='yes'><br /> <b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/><br /> <b:widget id='Label1' locked='false' title='Labels' type='Label'/><br /> <b:widget id='Feed1' locked='false' title='Hoctro"s Place' type='Feed'/><br /> <b:widget id='HTML1' locked='false' title='html code' type='HTML'/><br /> <b:widget id='Text1' locked='false' title='a text' type='Text'/><br /> <b:widget id='Image1' locked='false' title='pic' type='Image'/><br /> <b:widget id='LinkList1' locked='false' title='link list' type='LinkList'/><br /> <b:widget id='TextList1' locked='false' title='list' type='TextList'/><br /> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/><br /> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/><br /> </b:section><br /> </div><br /><br /> <!-- spacer for skins that want sidebar and main to be the same height--><br /> <div class='clear'> </div><br /><br /> </div> <!-- end content-wrapper --><br /><br /> <div id='footer-wrapper'><br /> <b:section class='footer' id='footer'/><br /> </div><br /><br /> </div></div> <!-- end outer-wrapper --><br /></body><br /></html><br /> <br /></font><br /><br /><br />Here is what you will probably see after saving the template and view the result,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/simplest.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/simplest.jpg" border="0" alt="" /></a><br /><br /><br />There are two things that are worth mentioning here:<br /><br />1.If you follow my three articles in the <a href="http://hoctro.blogspot.com/search/label/Understanding_Beta_Template?max-results=100">"Understanding Beta Template" series</a> closely, and if you ignore the CSS part (between the b:skin tags), you should be able to understand 100% the body section of the template! It's fairly identical to what I've been explaining to you in term of the meaning of the header, main, sidebar, and footer sections.<br /><br />2. In the head section, I keep two variables and the CSS commands for the body tag. You could even carefully leave this part out and the template would still work. My point is the Blogger contents do exist independently from their presentation counterparts. <br /><br /><span style="font-weight:bold;">6. The Road Ahead</span><br /><br />There are actually two roads ahead of us! For the ones who have artistic minds, you can apply what we have been discussing and create your own templates for your own use, and hopefully for others to use (for free, I might insist :-) as well. A great place to start is at the <a href="http://www.oswd.org/">Open Source Web Design homepage</a>.<br /><br />The other road to explore would be to <a href="http://hoctrointro.blogspot.com/2008/09/what-is-widget-after-all-part1.html">"hack" the inside of the widgets</a>. And of course this is fun too, I might add :-)<br /><br />Have a wonderful day and see you next time.<br /><br />Hoctro (10/2006)<br />Blog: http://hoctro.blogspot.com/Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-593470652848131892008-09-19T05:58:00.005-07:002008-09-19T08:38:27.299-07:00Archived Post: Showing Labels as Vertical Tabs<br/><br/>Dear Friend,<br /><br />This is soooo exciting! I'm happy to tell you we have another great help from our friend, <strong>The Exploding Boy</strong> yet again! Yesterday by luck I came across his vertical tab designs. These are indeed very good looking and professional designs. The first thing came to my mind was, of course, downloading and examining the code to see if I could re-use the horizontal tab hack to use for both vertical and <a href="http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html">horizontal</a> cases.<br /><br />My initial thought was true, that <strong>a list is a list</strong>, and that it doesn't know if it is a vertical or a horizontal bar! Therefore, to change from horizontal to vertical, we just have to add the appropriate CSS code, then <strong>change the tab name</strong>, and you'll have vertical tabs!<br /><br />After tweaking it a while, I was able to integrate them into Beta. Please see the demo on my test site:<br /><br /><a href="http://csspicstock.blogspot.com/2006/09/this-is-pic-stock-for-project-exploding.html">http://csspicstock.blogspot.com/2006/09/this-is-pic-stock-for-project-exploding.html</a><br /><br /><a href="http://photos1.blogger.com/blogger2/1410/800/1600/vertdesign.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/vertdesign.jpg" border="0" alt="" /></a><br /><br />Following are the instructions on how to install:<br /><span id="fullpost"><br /><br /><strong>1. </strong>Follow the instructions from <a href="http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html">the original Tab hack</a>.<br /><br /><strong>2.</strong>Add this code to the end of the CSS part, before the ] ] > sign:, change the CSS menu name from menu1 to menu<strong>x</strong> (x varies from 1 to 14 [designs].)<br /><font color="brown"><br />#menu<strong>1</strong> li{<br />margin:0;<br />padding:0 0 .25em 0;<br />text-indent:0px;<br />line-height:1.5em;<br />} <br /></font><br /><strong>3.</strong> Add the right CSS code next. I include the first one here, you can go to the demo site to grab the one you like the most<br /><br /><font color="brown"><br />#menu1 {<br />width: 200px;<br />margin: 10px;<br />border-style: solid solid none solid;<br />border-color: #3D261D;<br />border-size: 1px;<br />border-width: 1px;<br />}<br /><br />#menu1 li a {<br />height: 32px;<br />voice-family: "\"}\""; <br />voice-family: inherit;<br />height: 24px;<br />text-decoration: none;<br />} <br /><br />#menu1 li a:link, #menu1 li a:visited {<br />color: #E4D6CD;<br />display: block;<br />background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif);<br />padding: 8px 0 0 10px;<br />}<br /><br />#menu1 li a:hover {<br />color: #FFF;<br />background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif) 0 -32px;<br />padding: 8px 0 0 10px;<br />} <br /><br /></font><br /><br /><strong>4.</strong> Finally, change the div inside your widget to say "<strong>menu1</strong>" instead of "<strong>tabsF</strong>" like instructed in the original article. Keep the widget at the sidebar, and you should be able to see your vertical tabs. <br /><i><br />(Another amazing thing is, Beta automatically detects and updates the widgets internally. I didn't have to visually create my 14 labels, I cut and paste the template code 14 times, change the label names and div names, then save the design, and it works!)</i><br /><br />That's it! Enjoy your vertical tabs and don't forget to thank the Exploding Boy personally. I'm going there to thank him right after I'm done w/ typing this post.<br /><br />Cheers,<br /><br />Hoctro (9/2006)<br />Blog: http://hoctro.blogspot.com/<br /></span>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-64674846741919042892008-09-19T05:58:00.004-07:002008-12-09T07:35:15.529-08:00Archived Post: Showing Headlines by Labels<b>Important Update:</b> Labels now suppose to support unicode label. Please give it a try.<br /><br />*** <br /><br /><br/><br/>Dear Friend,<br /><br />I have a pretty long "grown-up Xmas" list, and in term of Blogging hacks, one of my wish is to find time to continue hacking with the new JSON format :-))) (Just kidding). <br /><br />After struggling for two weeks, here is the first of many more JSON hackings to come: a "<span style="font-weight:bold;">Contents by Category</span>" widget.<br /><br />This is what it looks like on the side bar:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7-kDoC_v8MOKKi5OdTGah_7NyM5hozXIs63oQgUjuXTI1IHbe_BANUHk-qzQvGe8EQ4HZT42H4T1CEIdIRz29m8Hvuez6OG05AUGbVJ1ek4MGSc5iUAaQY9SjnNdpkUfmvyEe7wixqHs/s1600-h/content.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7-kDoC_v8MOKKi5OdTGah_7NyM5hozXIs63oQgUjuXTI1IHbe_BANUHk-qzQvGe8EQ4HZT42H4T1CEIdIRz29m8Hvuez6OG05AUGbVJ1ek4MGSc5iUAaQY9SjnNdpkUfmvyEe7wixqHs/s400/content.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5008273486757060482" /></a><br /><br />And with a simple drag-n-drop (that's how I love the new Blogger!) here it is on the main column:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQ4AM87dPTowgFzPEja7kxeA02H6sGPFpxUBhQRy3ObA6Z5R7T89UNNzwOHtajkVk2iWHEMjKOphrV3gVzc0ofJQi9MzjqtbDENekooUP8JPWDYha8S2kZxdGOO3n-U0vOh6a4-6aWoY/s1600-h/content2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQ4AM87dPTowgFzPEja7kxeA02H6sGPFpxUBhQRy3ObA6Z5R7T89UNNzwOHtajkVk2iWHEMjKOphrV3gVzc0ofJQi9MzjqtbDENekooUP8JPWDYha8S2kZxdGOO3n-U0vOh6a4-6aWoY/s400/content2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5008273491052027794" /></a><br /><br />Of course with some simple CSS twists you could make it looks more fancier, if you wish.<br /><br />To install, first follow the instructions from this article <a href="http://hoctro.blogspot.com/2006/11/hacking-technique-how-to-modify-beta.html">Hacking Technique: How To Modify a Template</a>, in particular section <span style="font-weight:bold;">B.4</span>. <br /><br />Then, cut this code below and paste it in between any two "b:widget" tags, save the template, and you're done with the installing part.<br /><br /><font color="brown"><br /><b:widget id='HTML50' locked='false' title='Contents By Category' type='HTML'><br /><b:includable id='main'><br /><!-- *****************http://hoctro.blogspot.com*****Dec,2006****************** --><br /><!-- <b:if cond='data:blog.pageType == "item"'> --><br /> <!-- only display title if it's non-empty --><br /> <b:if cond='data:title != ""'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /><br /> <div class='widget-content'><br /><div id='data2006'/><br /><script type='text/javascript'><br /><br /><span style="font-weight:bold;">var homeUrl2 = "hoctro.blogspot.com";<br />var labels = ["Killer Hacks","Simple Hacks",<br /> "3 Column Templates", "Ajax Hacks","Custom Widgets", "Hacking Techniques"];<br /></span><br /><br />// Given a json label search, this function return the decoded label.<br />function getLabelFromURL(json) {<br />for (var l = 0; l &lt; json.feed.link.length; l++) {<br />if (json.feed.link[l].rel == 'alternate') {<br />var raw = json.feed.link[l].href;<br />// The next two lines are borrowed from Ramani's Neo Template<br />// code. Thanks Ramani!<br />var label = raw.substr(raw.lastIndexOf('/')+1);<br />return decodeURIComponent(label);<br />}<br />}<br />}<br /><br />function listEntries2(json) {<br /> var ul = document.createElement('ul');<br /><br /> for (var i = 0; i &lt; json.feed.entry.length; i++) {<br /> var entry = json.feed.entry[i];<br /> var alturl;<br /><br /> for (var k = 0; k &lt; entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> alturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> var li = document.createElement('li');<br /> var a = document.createElement('a');<br /> a.href = alturl;<br /><br /> var txt = document.createTextNode(entry.title.$t);<br /> a.appendChild(txt);<br /> li.appendChild(a);<br /> ul.appendChild(li);<br /> }<br /><br /> for (var l = 0; l &lt; json.feed.link.length; l++) {<br /> if (json.feed.link[l].rel == 'alternate') {<br /> var raw = json.feed.link[l].href;<br /> var label = raw.substr(homeUrl2.length+21);<br /><br />var label = getLabelFromURL(json);<br /> var txt = document.createTextNode(label);<br /> var h = document.createElement('h4');<br /> h.appendChild(txt);<br /> var div1 = document.createElement('div');<br /> div1.appendChild(h);<br /> div1.appendChild(ul);<br /> document.getElementById('data2006').appendChild(div1);<br /> }<br /> }<br />}<br /><br />function search2(query, label) {<br /><br /> var script = document.createElement('script');<br /> script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) + <br />'?alt=json-in-script&amp;callback=listEntries2');<br /> script.setAttribute('type', 'text/javascript');<br /> document.documentElement.firstChild.appendChild(script);<br />}<br /><br />for (var i=0; i &lt; labels.length; i++) <br /> if (labels[i])search2(homeUrl2, labels[i]);<br /></script><br /> </div><br /><br /> <b:include name='quickedit'/><br /><!-- </b:if> --><br /></b:includable><br /></b:widget><br /></font><br /><br /><br />Now, those settings <span style="font-weight:bold;">in bold</span> are for my blog! So, if you would like to do some free advertisements for me, then I wouldn't mind :) But I guess not.<br /><br />To change the code to your blog, along with the listing of your featured labels/categories, modify the <span style="font-weight:bold;">bold texts</span> below in the code:<br /><font color="brown"><br />var homeUrl2 = "<span style="font-weight:bold;">hoctro.blogspot.com</span>";<br />var labels = ["<span style="font-weight:bold;">Killer Hack</span>s","<span style="font-weight:bold;">Simple Hacks</span>",<br /> "<span style="font-weight:bold;">3 Column Templates</span>", "<span style="font-weight:bold;">Ajax Hacks</span>","<span style="font-weight:bold;">Custom Widget</span>s", "<span style="font-weight:bold;">Hacking Techniques</span>"];<br /></font><br />The second line is actually an array, separated by commas, and inside the double quotes. Replace those with yours, and feel free to add more if you like.<br /><br /><br />Until next time,<br /><br />Hoctro<br />12/13/06<br /><br /><br /><br />Thanks.<br /><br />***<br /><br />Update:<br /><br />1/17/07: Fixed bug of labels not having the right child posts. A new div will make sure the label header and its posts stays in one place.<br /><br /> var div1 = document.createElement('div');<br /> div1.appendChild(h);<br /> div1.appendChild(ul);<br /> document.getElementById('data2007').appendChild(div1);Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-54783895879129219552008-09-19T05:58:00.003-07:002008-09-19T06:12:39.743-07:00Archived Post: Showing Link List or Label Widgets as Tabs<br /><br />Dear Friend,<br /><br />User interaction/feedback once again proved to be a great source of new ideas.<a href="http://beta.blogger.com/profile/07863385900194288584"> Gareth Doutch</a>, one of my tab's hack reader, asks me if I can turn the "Link List Widget" to show up first as a horizontal link list (like Hans' Beautiful Beta link at the top of his blog,) then possibly also as horizontal or vertical tabs, exactly like the way the popular hacks "Labels as horizontal/vertical tabs" present. My initial thought was that this could be done, and it sure does.<br /><br />Without further ado, below are the instructions on how to apply the mod to your blog. <br /><br /><span style="font-weight:bold;">Instructions:</span><br /><span style="font-weight:bold;"><br /><u>Step 0: Link List without any modifications</u></span><br /><br />Here is a picture of an implemented link list widget without any modifications, I thought it would be nice to show it here so my readers know where I'm coming from, and the desire to make it more versatile by turning it into the three new versions:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/linklist0.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/linklist0.jpg" border="0" alt="" /></a><br /><br /><span style="font-weight:bold;"><br /><u>Step 1: Adding the Link List code</u></span><br /><br />In your "Edit template" window, add the code to the sidebar, where a line is highlighted, somewhere below the line <br /><br /><span style="font-weight:bold;">< b:section class='sidebar' ...</span><br /><br />as shown:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/linklist3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/linklist3.jpg" border="0" alt="" /></a><br /><br /><font color="brown"><br /><b:widget id='LinkList1' locked='false' title='' type='LinkList'><br /> <b:includable id='main'><br /> <div id='<span style="font-weight:bold;">tabsF</span>'><br /> <ul><br /> <li><a expr:href='data:blog.homepageUrl'><br /><span>Home</span></a></li> <br /> <b:loop values='data:links' var='link'><br /> <li><a expr:href='data:link.target'><span><br /><data:link.name/></span></a></li><br /> </b:loop><br /> </ul><br /> </div><br /> </b:includable><br /></b:widget><br /></font><br /><br />For example, if I add the above code to under the HTML1 widget, once I save the template, I will see only this one highlighted line (since Blogger hides the code unless you "expand" the "expand widget template" checkbox".)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/linklist0.0.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/linklist0.0.jpg" border="0" alt="" /></a> <br /><br />The widget is created, now we need some contents. (Or in my case, the baby is born, now he needs milk! :-)<br /><br /><u>Step 2: Adding links to your new Widget</u></span><br /><br />After you've done with set 1, don't forget to add things to your new link list widget for it to show up. To do that, choose "Edit" on the "Link List" box:<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/linklist1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/linklist1.jpg" border="0" alt="" /></a><br /><br />Now add your links and their titles:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/linklist2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/linklist2.jpg" border="0" alt="" /></a><br /><font color="red"><br /><span style="font-weight:bold;">Important Note:</span><br /><br />To have <b>horizontal tabs for your favorite labels</b>, copy the link you click when selecting a label as your URL. It should look like this format:<br /><br />http://<b><i>yourblog</i></b>.blogspot.com/search/label/<b><i>your label</i></b><br /><br />For example, here's the URL for my <b>Simple Hacks</b> label:<br /><br /><b>http://hoctro.blogspot.com/search/label/Simple%20Hacks</b><br /></font><br />Now you are ready to turn your regular list in to Tabs, or a horizontal list. Again, the "cute" thing about this hack, I think, is that it allows you to add, remove, or edit your links without going inside the template code.<br /><span style="font-weight:bold;"><br /><u>Step 3: Turning Link List into Tabs</u></span><br /><br /><u>a. Making a Link List Widget as Horizontal Tabs</u><br /><br />Adding the CSS code to the template for the linklist to turn into tabs. You can read <a href="http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html">here </a>on how to add. Remember, everything about the CSS is the same, we just want to add our own links as tabs, instead of using labels. hence disregard all the instructions about "labels" on that post. Don't forget to change the <span style="font-weight:bold;">id="tabsF"</span> in step 2 to whatever tab you like.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/ll1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/ll1.jpg" border="0" alt="" /></a><br /><br /><br /><u>b. Making a Link List Widget as Vertical Tabs</u><br /><br />Adding the CSS code to the template. You can read <a href="http://hoctro.blogspot.com/2006/09/tweaking-new-beta-adding-vertical-tabs.html">here </a>on how to add it. Remember, everything about the CSS is the same, we just want to add our own links as tabs, instead of using labels. Don't forget to change the id="tabsF" in step 2 to whatever tab you like.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/ll2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/ll2.jpg" border="0" alt="" /></a><br /><br /><br /><u>c. Link List Widget as Horizontal List of Items</u><br /><br />Paste this code to the CSS portion of your template (above the end skin tag,) then change the div id in the horizontal portion above from "<span style="font-weight:bold;">tabsF</span>" to "<span style="font-weight:bold;">horiz</span>".<br /><br /><font color="brown"><br />#horiz {<br />float:left;<br />width:100%;<br />}<br />#horiz ul {<br />margin:0;<br />list-style:none;<br />}<br />#horiz li {<br />display:inline;<br />}<br />#horiz a {<br />float:left;<br />}<br />#horiz a span {<br />float:left;<br />display:block;<br />padding:30px 5px 30px 5px;<br />color:#000;<br />}<br /></font><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/ll3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/ll3.jpg" border="0" alt="" /></a><br /><br /><br />Cheers,<br /><br />Hoctro<br />(10/31/06)Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-51835954279605657232008-09-19T05:58:00.002-07:002008-12-09T07:35:15.606-08:00Archived Post: What is a widget, after all? (Part 2)<br/><br/>Dear Friend,<br /><br />This is the second part of my <a href="http://hoctro.blogspot.com/2007/01/what-is-widget-after-all.html">article</a>,in which I explain what consists of a widget. Below is again the code from the last time.<br /> <br /><font color="brown"><br />01. <b:widget id='Label1' locked='false' title='Labels' type='Label'><br />02. <b:includable id='main'><br />03. <b:if cond='data:title'><br />04. <h2><data:title/></h2><br />05. </b:if><br />06. <div class='widget-content'><br />07. <ul><br />08. <b:loop values='data:labels' var='label'><br />09. <li><br />10. <b:if cond='data:blog.url == data:label.url'><br />11. <data:label.name/><br />12. <b:else/><br />13. <a expr:href='data:label.url'><data:label.name/></a><br />14. </b:if><br />15. (<data:label.count/>)<br />16. </li><br />17. </b:loop><br />18. </ul><br />19.<br />20. <b:include name='quickedit'/><br />21. </div><br />22. </b:includable><br />23. </b:widget><br /></font><br /><br />Now that we know a little bit what that does, what can we do to alter its appearance, or improve it to make the widget looks different?<br /><br /><span style="font-weight:bold;">1. Omit a feature:</span><br /><br />As a simplest hack of all, just <span style="font-weight:bold;">remove line 15</span>, where the line tells Blogger to print the label count along with the label name, and you're done. <br /><br />As a good precaution, if you're not sure if you really want to remove the line or not, you could comment it out, so Blogger could ignore the line (or lines) while reading the template. to do that, put these special code <span style="font-weight:bold;"><--</span> and <span style="font-weight:bold;">--></span> in front and at the end of the line<br /><font color="brown"><br /><span style="font-weight:bold;"><!--</span> (<data:label.count/>) <span style="font-weight:bold;">--></span><br /></font><br />Here's the result:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzwNfd5y_tvg-Zdx8hY0kpa8ix3P_H1I9eXjF_I5SQ1cY8oY0BAUGgwqHYLT-s_gwRpFFKAs9bs0pJT-tH_fkDuENPxvtExahhBLXdVV4K4t7pXq-YoXLaXvx6mqhGvq4AeTR0rbk-4vY/s1600-h/label1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzwNfd5y_tvg-Zdx8hY0kpa8ix3P_H1I9eXjF_I5SQ1cY8oY0BAUGgwqHYLT-s_gwRpFFKAs9bs0pJT-tH_fkDuENPxvtExahhBLXdVV4K4t7pXq-YoXLaXvx6mqhGvq4AeTR0rbk-4vY/s400/label1.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5027429250300304002" /></a><br /><br /><span style="font-weight:bold;">2. A simple change of appearance:</span><br /><br />Instead of a list, we can simply make it a paragraph, consists of many labels, separated by a character. To do that, change the code between line 7 and 18 to become:<br /><br /><font color="brown"><br />07. <div><br />08. <b:loop values='data:labels' var='label'><br />09. <span><br />10. <b:if cond='data:blog.url == data:label.url'><br />11. <data:label.name/><br />12. <b:else/><br />13. <a expr:href='data:label.url'><data:label.name/></a><br />14. </b:if><br />15. <!--(<data:label.count/>) --><br />16. </span> &nbsp;*&nbsp;<br />17. </b:loop><br />18. </div><br /></font><br /><br />Here's the result:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZthGFx-0yb_SE0jlGCQ5H_Ioy6wfQDVW5yeH0D7HVQbvNoyLjxWqeSF7TdE1wik1qRVYc07dCz1xU4tm8vOyQiDzh5WWo2-C6-TWIuub9HyRPmwkNH5V1pbqtE3fdMZnL9lxbtQEcckg/s1600-h/label2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZthGFx-0yb_SE0jlGCQ5H_Ioy6wfQDVW5yeH0D7HVQbvNoyLjxWqeSF7TdE1wik1qRVYc07dCz1xU4tm8vOyQiDzh5WWo2-C6-TWIuub9HyRPmwkNH5V1pbqtE3fdMZnL9lxbtQEcckg/s400/label2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5027431629712186002" /></a><br /><br />What we've done is to rename the "ul" (unordered list) tags to become "div" tags, and to rename "li" tags for each label to become "span" tags. Finally, the "&nbsp;*&nbsp;" at the end of line 16 is to separate labels with "*"<br /><br />A much improvement of this code would be to add JavaSript code to dynamically examine the label count, then adjust the span tag to show different text height per label, and other extra twists such as color, or font, to make this little hack become a <span style="font-weight:bold;">label cloud</span>.<br /><br /><span style="font-weight:bold;">3. Adding a simple tweak to existing code:</span><br /><br />Suppose you want your reader to open a new window every time he or she clicks on the label, simply add this code to line 13:<br /><font color="brown"><br />13. <a expr:href='data:label.url' <span style="font-weight:bold;">target='_blank'</span>><data:label.name/></a><br /></font><br />You can apply this trick to other widget as well. One of the question I got recently from a reader is how to create a new window every time the user clicks on a link for the link list widget. To do so, look for the widget:<br /><font color="brown"><br /><b:widget id='LinkList1' locked='false' title='Link List' type='<span style="font-weight:bold;">LinkList</span>'><br /></font><br />then this line,<br /><font color="brown"><br /><li><a expr:href='data:link.target'><data:link.name/></a></li><br /></font><br />and alter it to become:<br /><font color="brown"><br /><li><a expr:href='data:link.target' <span style="font-weight:bold;">target='_blank' </span>><data:link.name/></a></li><br /></font><br /><br /><span style="font-weight:bold;">4. Mixing of the above:</span><br /><br />Yet, there are also ways to mix and match elements to create new solutions. For example, suppose we like our "tags/labels/categories" naming, but we're not sure if the rest of the world have similar names. One way to quickly check that is to use our labels, but the link background is a combination of technorati syntax (http://www.technorati.com/tag/)instead of the default blogger tag search, and our label. Simply change line 13 to show like this, and the result is sweet:<br /><font color="brown"><br /><a expr:href=<span style="font-weight:bold;">'"http://www.technorati.com/tag/" + data:label.name'</span>><data:label.name/></a><br /></font><br /><br /><span style="font-weight:bold;">5. Reorganizing code and add CSS to turn the label widget into a completely different thing:</span><br /><br />This takes more thinking upfront, but the result is sweet. You can see a demonstration of such hack here: <a href="http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html"><br />http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html</a>.<br /><br /><br /><span style="font-weight:bold;">6. Combining with JSON callback technique:</span><br /><br />Since we know the label name, we can send the name to blogger to receive data back on all the posts belong to each label. The result would be like a site map, where each label shows its belonging post headers. I might implement this hack in the future, as all the background code is already existed in my <a href="http://hoctro.blogspot.com/search/label/JSON%20Hacks">other JSON hacks</a>.<br /><span style="font-weight:bold;"><br />Altering the logic code of a widget</span><br /><br />Surprisingly enough, it takes only two major language constructs to convey most of the blog's data and transforming it into a webpage, and another two constructs to organize code into understandable chunks and to call them. They are:<br /><br />1. The If statement<br /><br />2. The Loop statement<br /><br />3. The includable/include statements<br /><ul><br /><li>I think this is a major achievement of the template designers. Even though this is not a new idea, as it is already implemented in other languages such as PHP, and even the old blogger, it is still a very interesting and remarkable achievement.<br /><br /></li><li>The new Blogger template indeed uses XHTML extensively, so that when the page loads, what it sees in term of HTML tags, it will render exactly like that to the sceen. When it encounters a b:if and b:loop tags, on the other hand, it will render the suitable chunk of HTML or yet other template code based on the situation at hand. This fact alone makes great use of existing HTML tags, as the template designers safely ignore basic language features such as file I/O access, math, database retrieval syntax and command, etc.<br /><br /></li><li>Each widget also acts in its own isolated island, as none of the code from one widget could be accessed from another. To do that, you need to cut and paste the code. This way, bugs are isolated and easier to debug.<br /><br /></li><li>In Blogger template, as the same case with Classic Blogger, there is no construct on how to write data back to the server. I think this is such an excellent idea, as the blogger doesn't have to deal with another yet level of complexity.<br /><br /></li><li>Another thing that I like about the New Blogger template is that names are <a href="http://help.blogger.com/bin/answer.py?answer=47270&topic=10274">broken down into understandable "sub" names</a>, instead of the Classic Blogger way. This makes it easier to work with, or at least to guess the possible name for the feature.<br /></li></ul><br /><br /><span style="font-weight:bold;">The future of Widgets</span><br /><br />Widgets, except the "Blog Posts" and "Archived" ones, are relatively easy to understand and to hack, once you know the concepts. They are also very limited for "tweaking" activities, since there are not much data inside them, and there are basically two mentioned simple constructs: if and loop. But once they are combined with the power of JavaScript and JSON, as seen in the NEO template from Ramani and from some other recent hacks, they are getting really interesting to think about and to implement.<br /><br />And don't count Blogger out either. There might be other new widgets already in store for us, they are just waiting for the green light to see the day. <br /><br />The future of the New Blogger template and its wonderful widgets, in my mind, looks pretty good as there are plenty of room to play with and to improve.<br /><br />Cheers,<br /><br />Hoctro.Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-52871041203264558882008-09-19T05:58:00.001-07:002008-12-09T07:35:15.794-08:00Archived Post: What is a widget, after all? (Part1)<br/><br/>Dear Friend,<br /><br />Widget, widget, widget. You can't stop talking about the New Blogger without mentioning the buzzword "widget." So what is it really, and what can we do with it? This two-part article provides a gentle, non-programming-jargon introduction to <span style="font-weight:bold;">Widget</span>.<br /><br /><span style="font-weight:bold;">Widget as visual component</span><br /><br />One of the main selling point of the New Blogger over Classic is the introduction of the drag-and-drop Page Elements. I still remember vividly the first time I played around with it. I had seen and used similar visual layouts before (Visual Basic or Visual C++ GUI tools,) but to me it was such a great experience, and still is. <br /><br />Like your labels to show up on the main area instead of on the sidebar? No problem, just drag, save, and see the result. Dragging back to its own place is just as easy! How about moving it up or down, sneaking between two other widgets? Again the visual interface is just so simple - yet elegant, it moves gently all other widgets down and make a blank dotted window for the dragging widget to fit in. This visual interface makes the act of moving "things" around your webpage really easy now, as it helps speed up the designing process quite a bit. <br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Q_3Le51T1zf8sHMNpbtUyQG98mDmmFvJowbIJUAenMlzpCSxPWNGy85ro_TBWUBkzv42zhmgPfd1dtzEQTPFUheITfsSP5TChmmMhPV-C6OgM2uxQcI_BK3tvlSb0w9vzM5IOncgtpc/s1600-h/move1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Q_3Le51T1zf8sHMNpbtUyQG98mDmmFvJowbIJUAenMlzpCSxPWNGy85ro_TBWUBkzv42zhmgPfd1dtzEQTPFUheITfsSP5TChmmMhPV-C6OgM2uxQcI_BK3tvlSb0w9vzM5IOncgtpc/s400/move1.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5024096422060675330" /></a><br /><span style="font-style:italic;">moving the "Label" widget from the sidebar ...</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo96aWcZV6sWxf-JVKdg96aJZPiLmVdB94f7QREI6kElTiHlwvYucdRsDCUanJtFFklsuOF3CGlv4KjIAseDlvVSnS9pTXDkwEsqVEcXm3D1t2juHvo_VSdoc6jYosCs9oCjKHHdgL1p0/s1600-h/move2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo96aWcZV6sWxf-JVKdg96aJZPiLmVdB94f7QREI6kElTiHlwvYucdRsDCUanJtFFklsuOF3CGlv4KjIAseDlvVSnS9pTXDkwEsqVEcXm3D1t2juHvo_VSdoc6jYosCs9oCjKHHdgL1p0/s400/move2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5024096422060675346" /></a><br /><span style="font-style:italic;">... to the main area.</span><br /><br /><span style="font-weight:bold;">Widget as textual component</span><br /><br />Two weeks into introducing the Page Elements (around August 2006,) Blogger finally revealed the code behind the scene. For the first time, hackers alike could investigate what made the widget worked the way it was. In my opinion, the template itself has an ingenious design philosophy. The template allows code to be packaged in a neat and isolated way, sophisticated enough to expose data in myriad yet easy-to-guess and organized fashion. The extraction-of-data process could be achieved with just several simple loops and if statements over a clever way of accessing data based on their widget type only.<br /><br />The Blogger Help line <a href="http://help.blogger.com/bin/answer.py?answer=46995&topic=10274">documents</a> this very well, along with the <a href="http://help.blogger.com/bin/answer.py?answer=46995">data exposed of each kind of widget</a>. Unfortunately, I think the way Blogger explains is a tad difficult to completely understand what the system is all about.<br /><br />In the next section, I will try to explain to you the inner working of the "Label" as a sample of a typical widget. This article, thus, is a continuation of my explanations about template code:<br /><ul><br /><li><a href="http://hoctro.blogspot.com/2006/09/beta-template-from-ground-up-top-down.html">Understanding the New Blogger Template (1)</a></li><br /><li><a href="http://hoctro.blogspot.com/2006/09/new-beta-template-top-down-approach-for.html">Understanding the New Blogger Template (2)</a></li><br /><li><a href="http://hoctro.blogspot.com/2006/10/understanding-new-beta-template-top.html">Understanding the New Blogger Template (3)</a></li><br /></ul><br />I hope you have had a chance to look at all three of them before moving on to the next section. At the end of the third article, we were seeing lots of widgets in their simplified (declaration) form. Now, let's open up one of the easiest but very useful one, namely the "Label" widget.<br /><br /><span style="font-weight:bold;">Going inside the Label Widget</span><br /><br />Below is the code of the widget. I put the line number at the start of each line so I could talk about it in a more effective way.<br /><font color="brown"><br />01. <b:widget id='Label1' locked='false' title='Labels' type='Label'><br />02. <b:includable id='main'><br />03. <b:if cond='data:title'><br />04. <h2><data:title/></h2><br />05. </b:if><br />06. <div class='widget-content'><br />07. <ul><br />08. <b:loop values='data:labels' var='label'><br />09. <li><br />10. <b:if cond='data:blog.url == data:label.url'><br />11. <data:label.name/><br />12. <b:else/><br />13. <a expr:href='data:label.url'><data:label.name/></a><br />14. </b:if><br />15. (<data:label.count/>)<br />16. </li><br />17. </b:loop><br />18. </ul><br />19.<br />20. <b:include name='quickedit'/><br />21. </div><br />22. </b:includable><br />23. </b:widget><br /></font><br /><br />Before getting in some more details in the second part of the article, let's find out what's going on here in general. I will explain what the widget does line by line.<br /><br /><span style="font-weight:bold;">Explaining the internal code</span><br /><br /><span style="font-weight:bold;">Line 1</span> declares that this is a widget of type "Label," with its unique identification id='Label1' (to be stored somewhere inside one of Google's servers,) with the title "Labels" to be seen by viewers. Also, the "locked" setting is set to "false", meaning you could freely drag this widget to anywhere inside the Page Elements. <br /><br /><span style="font-weight:bold;">Line 23</span> closes the widget. This means that any line from<span style="font-weight:bold;"> 2 to 22</span>, the data exposed will be of type "Label". <a href="http://help.blogger.com/bin/answer.py?answer=47270&topic=10274#labels">From the Blogger help line</a>, we see that we could only retrieve four distinct kind of data: first the title of the widget <span style="font-weight:bold;">(data:title)</span>; and, for each found label of your entire hompage, we can access its name <span style="font-weight:bold;">(data:label.name)</span>, the post count for each label <span style="font-weight:bold;">(data:label.count)</span>, and the url of the link to a page displaying posts with this label <span style="font-weight:bold;">(data: label.url)</span>.<br /><br />Each widget allows many subordinate functions to stay inside. For example, you could consolidate redundant code into a function, to be called many times during the widget's lifetime. I have an example of such creation of function <a href='http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-define-function.html'>here</a>.<br /><br />By default, each widget must <span style="font-weight:bold;">always</span> have a special function with identification <span style="font-weight:bold;">id='main'</span>. It's sort of like your house's front door. Everybody enters your house must go though this front door, even yourself. There's no shortcut allowed, such as the garage door, the back door, or anything like that. It's just a rule that we must simply obey.<br /><br /><span style="font-weight:bold;">Line 2 </span>starts the main includable and <span style="font-weight:bold;">line 22 </span>closes it. This means that the widget only contains within itself one function only, that is the "main" function ( it is acually is called <span style="font-weight:bold;">includable</span> in Blogger's terminology.)<br /><br />This function does several things. <br /><br /><span style="font-weight:bold;">Line 3 through 5</span> checks to see if the title has text, if so, it displays the text inside a pair of <span style="font-weight:bold;">h2</span> tags.<br /><br />Next, <span style="font-weight:bold;">line 6 and line 21</span> opens and closes a pair of "div" tags with the class "widget-content." This setting, <span style="font-style:italic;">(in conjunction with the widget's name, which will turn into another id tag)</span> allows us to have unique presentation settings for the label contents using CSS rules.<br /><br /><span style="font-weight:bold;">Line 7 and line 18 </span>opens and closes a pair of ul tags. This allows the labels displayed as a bullet list.<br /><br /><span style="font-weight:bold;">Line 8 and line 17 </span>opens and closes a pair of special template tags <span style="font-weight:bold;">b:loop</span>. This loop is reponsible for exposing each label data one at a time from start til end of the set of available labels.<br /><br />Inside the "b:loop", there are some texts which are going to be put inside a pair of li tags. For example, if we have five labels, we should have a list with a core layout like this:<br /><br /><ul><br /> <li>(some text here for label 1)</li><br /> <li>(some text here for label 2)</li> <br /> <li>(some text here for label 3)</li> <br /> <li>(some text here for label 4)</li> <br /> <li>(some text here for label 5)</li> <br /></ul> <br /><br />Indeed, <span style="font-weight:bold;">line 10 and line 11 </span>say that if the current page is the same as the label's url (line 10,) which means that you are already in that label querying page, then just show the name only, but not with the link under it. (line 11)<br /><br />Otherwise, or "else", in computer's lingo (<span style="font-weight:bold;">line 12</span>), shows a link and the text represents it ( line 13)- which is the label itself.<br /><br />Along with the label, the widget shows the head count (in a pair of parentheses) of how many posts the current label (in the loop) is assigned to.<br /><br />Finally, <span style="font-weight:bold;">line 21 </span>shows the widget's edit button, allowing you to edit the contents or settings of the widget while viewing the page live. This function is a kind of global and hidden function, since it could be place anywhere, yet not a single line of code on how this widget button actually composed of.<br /><br />You are at the end of part 1 of this "Widget 101" article. On the second part, I will delve more into the internal working of a widget, as well as offering you some simple "tweaks" (or "hacks") on changing the widget's appearance. I will also provide proofs to my assertions why the new template is indeed an ingenious design. Finally, I will talk about how I (and other people) have been extending these widgets to provide more functionalities with the help of the <span style="font-weight:bold;">JavaScript programming language</span> and <span style="font-weight:bold;">JSON callback technique</span>.<br /><br />Have a wonderful day.<br /><br />Hoctro<br />1/26/07Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-23487575334076486842008-09-16T06:11:00.001-07:002008-12-09T07:35:16.369-08:00Archived Post: Adding a Breadcrumb Trail to your Blogger Post<br/><br/>Dear Friend,<br /><br />Have you ever experienced after searching and googling to a comprehensive website, then lose track of where you are, and what you are really looking for? I did, many times. To quote a page on the Yahoo's Design Pattern Library: "<span style="font-weight:bold;">When the page displayed is within a hierarchy of pages and is not the topmost page</span>," the reader needs some sort of "<span style="font-weight:bold;">understanding of where she is in relation to the rest of the site.</span>" <br /><br /><span style="font-weight:bold;">The breadcrumb trail</span> at the top of a post provides a nice solution to this problem. In a breadcrumb, you can always click on the label/category before it, or click the "Home" link to go back to the front page. More importantly, the user knows where she is, something that other navigation widgets such as the out-of-the box label, or my previous "tab hack" are not able to address (yet.)<br /><br /><a href="http://photos1.blogger.com/blogger2/1410/800/1600/bc.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/200/bc.jpg" border="0" alt="" /></a><br /><br />Below are two easy steps to install the "Breadcrumbs Hack" on your blog.<br /><br /><span id="fullpost"><br /><br /><span style="font-weight:bold;">Step1:</span> Embedding Function Definition and Function Call.<br /><br />Go to Template->Edit HTML, then check the Expand Widget Templates checkbox.<br />Look for the <span style="font-weight:bold;">Blog1 widget</span> (<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">), then <span style="font-weight:bold;">locate the main includable</span>:<br /> <br />Put the below code right in front of the highlighted text:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrDfeCu_xwe-chOrmsk3YLL7TykJRQvDlKu3J-QKMe7n_y61Gkf1W-Ss_kNNkysbLNKsk0WP5tKcl7INf2Pqg_ImkIFoK3u1Xejh7U4702O7vjhUqBxto3WwRmiOK_9fKNyUqvCeJt-v0/s1600-h/bc1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrDfeCu_xwe-chOrmsk3YLL7TykJRQvDlKu3J-QKMe7n_y61Gkf1W-Ss_kNNkysbLNKsk0WP5tKcl7INf2Pqg_ImkIFoK3u1Xejh7U4702O7vjhUqBxto3WwRmiOK_9fKNyUqvCeJt-v0/s400/bc1.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5067027412379366306" /></a><br /><br /><code><br /><font color="brown"><br /><b:includable id='breadcrumbs' var='post'><br /><!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com --><br /> <b:if cond='data:blog.pageType == "item"'><br /> <p class='breadcrumbs'><br /> <span class='post-labels'><br /> <b:if cond='data:post.labels'><br /> You are here: <br /> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <span style="font-weight:bold;">&gt;</span> <br /> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:label.isLast == "true"'><br /> <a expr:href='data:label.url' rel='tag'> <data:label.name/></a><br /> </b:if><br /> </b:loop><br /> <b:if cond='data:post.title'><br /> <span style="font-weight:bold;">&gt;</span> <b><data:post.title/></b><br /> </b:if><br /> </b:if><br /> </span><br /> </p><br /> </b:if><br /><!-- End of Breadcrums Hack --><br /></b:includable><br /></font><br /></code><br /><br /><br />Next, add this line:<br /><font color="brown"><br /><b:include data='post' name='breadcrumbs'/><br /></font><br /><b>right in front of</b> the line <span style="font-style:italic;"><b:if cond='data:post.dateHeader'></span>. (Since you're already located the line <span style="font-style:italic;"><b:includable id='main' var='top'></span>, once you add this new line, it is now part of blog1 widget.)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehvG7OT0TlTmpxoiZJ2r65hrhGDtLsnktcI33rlUedIiQDX-cER5EMJTwhoJqDsEZx4hf0mQhx9ksMSfk9Ny0VH0vAV6vRmqBkmwuCOQ1uZhXZ0SP0nZmvnKnUYq1YvrydHQnqCOfbdM/s1600-h/bc2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehvG7OT0TlTmpxoiZJ2r65hrhGDtLsnktcI33rlUedIiQDX-cER5EMJTwhoJqDsEZx4hf0mQhx9ksMSfk9Ny0VH0vAV6vRmqBkmwuCOQ1uZhXZ0SP0nZmvnKnUYq1YvrydHQnqCOfbdM/s400/bc2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5067034357341483954" /></a><br /><br /><span style="font-weight:bold;">Step 2:</span> Add CSS code<br /><br />Add this code at the end of the CSS portion (between the pair skin tags (see picture)<br /><font color="brown"><br />.breadcrumbs { <br /> border-bottom:1px dotted #000;<br /> margin:2em 0 0.5em;<br /> padding:<span style="font-weight:bold;">0</span> 0 <span style="font-weight:bold;">0.5em</span>;<br /> }<br /></font><br /><br />(Feel free to modify the first & third parameters of the last two lines (in <span style="font-weight:bold;">bold</span>) to expand/shorten the top & bottom heights.)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/bc3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/200/bc3.jpg" border="0" alt="" /></a><br /><br />Save your editing, and you should see the breadcrumb only when you view an item page.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/bc4.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/200/bc4.jpg" border="0" alt="" /></a><br /><br /><br /><br />I hope you will enjoy this hack and find it useful. Have a wonderful day,<br /><br />Hoctro (9/11/2006)<br />Blog: http://hoctro.blogspot.com/<br /></span>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-82187575923921125342008-09-16T05:41:00.000-07:002008-12-09T07:35:16.774-08:00Archived Post: Yet another TabView Application: Latest Posts of Favorite BlogsDear Friend,<br /><br />With a simple twist of <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget-part-2.html">Tabview - Part 2 tutorial</a>, you can collect all of your fav blogs into one nice view.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPtYdtbIc5e3tEQQbut1vk0jT0Kf75J-OhideCWtpEvFJq3AYIH_O4vI73E5uMet8rAtb1kBRM-kbQXXVFe_qK7whDbfXCtTTZPlyIBn313pMXhQFoHsmdHrHigdskri8NLPwiguew2Q/s1600-h/friends.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPtYdtbIc5e3tEQQbut1vk0jT0Kf75J-OhideCWtpEvFJq3AYIH_O4vI73E5uMet8rAtb1kBRM-kbQXXVFe_qK7whDbfXCtTTZPlyIBn313pMXhQFoHsmdHrHigdskri8NLPwiguew2Q/s400/friends.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5067275640014238658" /></a><br /><br />Here is the code, I'll let you figure out how to add it to the TabView widget :-)<br /><br /><font><br />var tabView2 = new YAHOO.widget.TabView('multiTab2');<br /><br />function listLatestPostsTab2a(json) {<br />listOneTab(json, tabView2, "Hackosphere", true);}<br />cb.search( "hackosphere.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2a');<br /><br />function listLatestPostsTab2b(json) {<br />listOneTab(json, tabView2, "Beautiful Beta", false);}<br />cb.search( "beautifulbeta.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2b');<br /><br />function listLatestPostsTab2c(json) {<br />listOneTab(json, tabView2, "Blogger Hacked", false);}<br />cb.search( "blogger-hacked.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2c');<br /><br />function listLatestPostsTab2d(json) {<br />listOneTab(json, tabView2, "Phydeaux", false);}<br />cb.search( "phydeaux3.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2d');<br /><br />function listLatestPostsTab2e(json) {<br />listOneTab(json, tabView2, "Blog U", false);}<br />cb.search( "bloggeruniversity.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2e');<br /><br />function listLatestPostsTab2f(json) {<br />listOneTab(json, tabView2, "Purple Moggy", false);}<br />cb.search( "purplemoggy.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2f');<br /><br />function listLatestPostsTab2h(json) {<br />listOneTab(json, tabView2, "The Last Word", false);}<br />cb.search( "lastword.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2h');<br /></font><br /><br />Have a wonderful day,<br /><br /><b><u>Update:</u></b><br /><br />*26 May 07: Wai Yan Lin translated part 1 and 2 of the TabView widget and this post to Burmese here:<br /><a href="http://waiyanlinn.blogspot.com/2007/05/tabview-widget.html">http://waiyanlinn.blogspot.com/2007/05/tabview-widget.html</a>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-16018043507580224592008-09-16T05:37:00.001-07:002008-12-09T07:35:16.914-08:00Archived Post: TabView Application: A Blogger Hack DirectoryDear Friend,<br /><br />Here is an application of the <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html">TabView widget</a>, a "Blogger Hack Directory". Of course, you would have different interests, once you decide to make a directory for yourself.<br /><br /><a href="http://hoctro-bloggerhackdir.blogspot.com/"><br />http://hoctro-bloggerhackdir.blogspot.com/</a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NJv_d9DGxjkmGPchjSnOwckf_iJjSKJJ14FTSJGxnpecLZFQbissVuwxEfSPACRhY-hXkqIS48qJc_xvT4ybi3nkq-nvpCnvPppieLly4UwcKAF9AZ3G5WiHEPXeMG-2GiSwEm0X0os/s1600-h/dir2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NJv_d9DGxjkmGPchjSnOwckf_iJjSKJJ14FTSJGxnpecLZFQbissVuwxEfSPACRhY-hXkqIS48qJc_xvT4ybi3nkq-nvpCnvPppieLly4UwcKAF9AZ3G5WiHEPXeMG-2GiSwEm0X0os/s400/dir2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5066788702392021906" /></a><br /><br />For your convenience, you could download the template from the link below: <br /><br /><a href="http://hoctro2007.googlepages.com/bloggerdirectory.xml">http://hoctro2007.googlepages.com/bloggerdirectory.xml</a><br /><br /><br />Then, <b>create a new blog</b>, and upload the template. Once you know how to alter the contents, you'll be able to create your own version.<br /><br /><br />For information on how to upload a template, please follow the instructions from this article: <a href="http://hoctro.blogspot.com/2006/11/hacking-technique-how-to-modify-beta.html#install">Hacking Technique - How To Modify a Template</a></span> or from <a href="http://blogger-templates.blogspot.com/2006/04/install-new-blogger-template.html">"Blogger-Templates" </a>blog. <br /><br /><br />Have a wonderful day.Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-82543820031341787072008-09-16T05:27:00.001-07:002011-08-21T10:54:24.628-07:00Archived Post: Tab View (Part 2)Dear Friend,<br />
<br />
My next step in perfecting the <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html">TabView widget</a> is to add two default tabs to show a blog's latest posts and comments. I also modify the code so that you can have multiple blogs shown in different views. <br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7mxDHGXbJL63Jlp74sm3r5QG5nWhyopAvlm9WG9EtP1tEX95BOo1HwRYCcoGBpYxBMrDWyw1xntcJpRgNZA7nR6mMLR2W78JPmXwdkViv2hd-Hrd8OwlxQOh8gTilJCy0hHz114IBNQ/s1600-h/tabv2.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5066454914713645938" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7mxDHGXbJL63Jlp74sm3r5QG5nWhyopAvlm9WG9EtP1tEX95BOo1HwRYCcoGBpYxBMrDWyw1xntcJpRgNZA7nR6mMLR2W78JPmXwdkViv2hd-Hrd8OwlxQOh8gTilJCy0hHz114IBNQ/s320/tabv2.jpg" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" /></a><br />
<br />
But first, a quick explanation on "commenting out" things from a Blogger template. <br />
<br />
If you want to exclude a section of code inside the two <b><script></b> and <b></script></b>, you can either use <b>//</b> for a single line, or <b>/* */ </b>for multiple lines.<br />
<br />
For template code <b>outside</b> Javascript such as html tags, use this notation instead <b><!-- --></b><br />
<br />
Now, to see the effect of multiple tab views, in step 3 from "Introducing TabView Widget - Part 1" tutorial, remove the <b><!-- </b>in front of and <b>--></b> after the bold code below so the code looks like this<br />
<br />
<br />
<div><br />
<h2>Hoctro's Place</h2><br />
<div class='yui-navset' id='multiTab1'/><br />
</div><br />
<br />
<b><br />
<div><br />
<h2>Hackosphere</h2><br />
<div class='yui-navset' id='multiTab2'/><br />
</div><br />
</b><br />
<br />
<br />
and also near the end remove the <b>/*</b> in front of and and <b>*/</b> after the bold code below so the segment now looks like this:<br />
<br />
<br />
// Preferred Labels<br />
for (var i=0; i &lt; labels1.length; i++)<br />
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');<br />
<br />
<b><br />
var blog2 = "hackosphere.blogspot.com";<br />
var tabView2 = new YAHOO.widget.TabView('multiTab2');<br />
var labels2 = ['Neo','Widgets', "Blogger Power"];<br />
function listTab2(json) {<br />
listOneTab(json, tabView2, "", false);<br />
}<br />
function listLatestPostsTab2(json) {<br />
listOneTab(json, tabView2, "Latest Posts", true);<br />
}<br />
function listLatestCommentsTab2(json) {<br />
listOneTab(json, tabView2, "Latest Comments", false);<br />
}<br />
// Activating calls!<br />
// Latest Posts<br />
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');<br />
<br />
// Latest Comments<br />
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');<br />
<br />
// Preferred Labels<br />
for (var i=0; i &lt; labels2.length; i++)<br />
if (labels2[i]) cb.searchLabel("hackosphere.blogspot.com", labels2[i], 'listTab2');<br />
</b> <br />
</script><br />
<br />
</b:includable><br />
</b:widget><br />
<br />
<br />
What you will see now is the appearance of another tab view, showing Hackosphere's latest posts, comments, and are watch list of interesting labels.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7mxDHGXbJL63Jlp74sm3r5QG5nWhyopAvlm9WG9EtP1tEX95BOo1HwRYCcoGBpYxBMrDWyw1xntcJpRgNZA7nR6mMLR2W78JPmXwdkViv2hd-Hrd8OwlxQOh8gTilJCy0hHz114IBNQ/s1600-h/tabv2.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5066454914713645938" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7mxDHGXbJL63Jlp74sm3r5QG5nWhyopAvlm9WG9EtP1tEX95BOo1HwRYCcoGBpYxBMrDWyw1xntcJpRgNZA7nR6mMLR2W78JPmXwdkViv2hd-Hrd8OwlxQOh8gTilJCy0hHz114IBNQ/s320/tabv2.jpg" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" /></a><br />
<br />
As you can see, I make it a little bit easier for you to have the ability to add a new tab view, simply by removing the comments. But the process to add a new view from scratch is quite involved, so you need to pay extra attention to make it right. I believe if you interested in reading this article, you already have enough knowledge to proceed. (I wish I can use the ultimate solution, that is writing a pseudocope class, but I have not enough experience to pass value such as json and array to a parameter by reference. So you have to live with the less convenient solution such as this.)<br />
<br />
<br />
Adding a new tab view to the widget is a three step process, and I will carefully walk you through each step.<br />
<br />
<h3>Step 1.</h3><br />
<br />
If you have not already installed the <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html">TabView widget</a>, please do so.<br />
<br />
We are adding yet another third view for the purpose of tracking latest development on Hans' Beautiful Beta blog, and it's going to involve a lot of cut-and-paste, modifying and also common sense. Let's name the id of the "div" that will store it as <b>multiTab3.</b><br />
<br />
<h3>Step 2: Adding the HTML code to house the title and tabview</h3><br />
<br />
This step allows you to configure the appearance of the tab views, either vertically, or as a 2 column table, or anything you like.<br />
<br />
In step 3's code of part 1, cut and paste this code below right next to it.<br />
<br />
<br />
<div><br />
<h2>Hoctro's Place</h2><br />
<div class='yui-navset' id='multiTab1'/><br />
</div><br />
<br />
<br />
then change h2 content and the id to become (in bold):<br />
<br />
<br />
<div><br />
<h2><b>Beautiful Beta</b></h2><br />
<div class='yui-navset' id='<b>multiTab3</b>'/><br />
</div><br />
<br />
<h3>Step 3: Adding Javascript code to create a new view</h3><br />
<br />
In step 3's code of part 1, cut and paste this code below right next to it.<br />
<br />
<br />
var blog1 = "hoctro.blogspot.com";<br />
var tabView1 = new YAHOO.widget.TabView('multiTab1');<br />
var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];<br />
function listTab1(json) {<br />
listOneTab(json, tabView1, "", false);<br />
}<br />
function listLatestPostsTab1(json) {<br />
listOneTab(json, tabView1, "Latest Posts", true);<br />
}<br />
function listLatestCommentsTab1(json) {<br />
listOneTab(json, tabView1, "Latest Comments", false);<br />
}<br />
<br />
// Activating calls!<br />
<br />
// Latest Posts<br />
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');<br />
<br />
// Latest Comments<br />
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');<br />
<br />
// Preferred Labels<br />
for (var i=0; i &lt; labels1.length; i++)<br />
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');<br />
<br />
<br />
This is labor-intensive, as we want to duplicate everything from "1" to "3", or rename the blog, such as<br />
<br />
blog1 -> blog3<br />
hoctro.blogspot.com -> beautifulbeta.blogspot.com<br />
tabView1 -> tabView3<br />
multiTab1 -> multiTab3<br />
labels1 -> labels3<br />
<br />
and so on.<br />
<br />
Below is my solution to that replacing process, with changed values in bold:<br />
<br />
<br />
var <b>blog3</b> = "<b>beautifulbeta.blogspot.com</b>";<br />
var <b>tabView3</b> = new YAHOO.widget.TabView('<b>multiTab3</b>');<br />
var <b>labels3</b> = [<b>'hacks', 'tutorials','widgets', 'gadgets'</b>]; // These are Hans' labels.<br />
function <b>listTab3</b>(json) {<br />
listOneTab(json, <b>tabView3</b>, "", false);<br />
}<br />
function <b>listLatestPostsTab3</b>(json) {<br />
listOneTab(json, <b>tabView3</b>, "Latest Posts", true);<br />
}<br />
function <b>listLatestCommentsTab3</b>(json) {<br />
listOneTab(json, <b>tabView3</b>, "Latest Comments", false);<br />
}<br />
<br />
// Activating calls!<br />
<br />
// Latest Posts<br />
cb.search( <b>blog3</b>, "posts", 1, 25, '<b>listLatestPostsTab3</b>');<br />
<br />
// Latest Comments<br />
cb.search( <b>blog3</b>, "comments", 1, 25, '<b>listLatestCommentsTab3</b>');<br />
<br />
// Preferred Labels<br />
for (var i=0; i &lt; <b>labels3</b>.length; i++)<br />
if (<b>labels3</b>[i]) cb.searchLabel(<b>blog3</b>, <b>labels3</b>[i], '<b>listTab3</b>');<br />
<br />
<br />
I also just realize that the html code from step 2 can be placed anywhere, so I just moved my hoctro.blogspot.com tab view to the front of the blog's widget, and it works as expected.<br />
<br />
That's all! Please give it a try.<br />
<br />
Have a wonderful day.<br />
<br />
<b><u>Update:</u></b><br />
<br />
* 24 May 07: A translation of this article to indonesian by Bikin is available here: <br />
<a href="http://bikinblogger.blogspot.com/2007/05/tabview-widget-bagian-2.html">http://bikinblogger.blogspot.com/2007/05/tabview-widget-bagian-2.html</a><br />
<br />
*26 May 07: Wai Yan Lin translated also part 1, 2 & fav blogs application to Burmese here:<br />
<a href="http://waiyanlinn.blogspot.com/2007/05/tabview-widget.html">http://waiyanlinn.blogspot.com/2007/05/tabview-widget.html</a>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-81407195221559405122008-09-14T06:29:00.000-07:002008-09-14T06:30:26.909-07:00Archived Post: a Widget to Show Thumbnail Pictures<br><br>Dear Friend,<br /><br />I'm very proud to show you my <span style="font-weight:bold;">original and truly first</span> Blogger Beta Hack.<br /><br />In a nutshell, the hack takes advantage of the Page Element's Link List and turns it into a <span style="font-weight:bold;">Thumbnail Picture List</span> element.</span> As you might know, the link list allows the page owner to quickly add a bunch of urls for quick links to other interesting sites. My hack takes advantage of the GUI interface to quickly add/erase/arrange these links but pushes it further to upload image addresses instead.<br /><br />Here are the steps to setup this hack. You are also required to know some HTML & CSS to further enhance this hack to make it your own unique version of it.<br /><span id="fullpost"><br />First, go to <span style="font-weight:bold;">Template->Add Elements</span>, then select <span style="font-weight:bold;">sidebar's Add Page Elements</span>. Select <span style="font-weight:bold;">Link List option</span> at top right corner:<br /><br /><a href="http://photos1.blogger.com/blogger/1916/3748/1600/h-1.jpg"><img style="display:block; margin:0px auto 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/1916/3748/320/h-1.jpg" border="0" alt="" /></a><br /><br />Next, add some sample pictures:<br /><br /><a href="http://photos1.blogger.com/blogger/1916/3748/1600/h-2a.jpg"><img style="display:block; margin:0px auto 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/1916/3748/320/h-2a.jpg" border="0" alt="" /></a><br /><br />Then, drag-n-drop the newly created link-list from sidebar to post body area. (You can always move it back later.)<br /><br /><a href="http://photos1.blogger.com/blogger/1916/3748/1600/h-2b.jpg"><img style="display:block; margin:0px auto 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/1916/3748/320/h-2b.jpg" border="0" alt="" /></a><br /><br />Go to <span style="font-weight:bold;">Template->Edit HTML</span>. Make sure to check the <span style="font-weight:bold;">Expand Widget Template</span> check box. Then look for the <span style="font-weight:bold;">LinkList1</span> widget. It should be in front of all the other widgets, and right after the CSS portion of the code. <br /><br /><a href="http://photos1.blogger.com/blogger/1916/3748/1600/h-3.jpg"><img style="display:block; margin:0px auto 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/1916/3748/320/h-3.jpg" border="0" alt="" /></a><br /><br />Then replace that widget with this one, make sure they have the same name (LinkList1):<br /><br /><code><font color="brown"><br /><b:widget id='LinkList1' locked='false' title='Random Pics' type='LinkList'><br /><b:includable id='main'><br /><b:if cond='data:title'><h2><data:title/></h2></b:if><br /> <div class='widget-content'><br /> <div class='hoctro_spacer'><br /> <b:loop values='data:links' var='link'><br /> <a expr:href='data:link.target' onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}'><img alt='' border='0' <br />expr:src='data:link.target' height='100' style='display:inline; margin:0px auto 10px; ;cursor:pointer;' width='100'/></a><br /> </b:loop><br /> </div><br /> <b:include name='quickedit'/><br /> </div><br /></b:includable><br /></b:widget><br /></font><br /></code><br /><br />As you can see, I use the same code that Blogger provides when it successfully upload an image as a mean to show the image itself. You can use whatever it best fits your purpose.<br /><br /><span style="font-weight:bold;"><code><font color='blue'><br /> <a expr:href='data:link.target' <br /> onblur='try {parent.deselectBloggerImageGracefully();} catch(e) {}'><br /> <img alt='' border='0' <br /> expr:src='data:link.target' height='100' <br /> style='display:inline; margin:0px auto 10px; ;cursor:pointer;' <br /> width='100'/><br /> </a><br /></font></code></span><br /><br />Feel free to change this portion of code to anything you like. Just make sure the <span style="font-weight:bold;">src</span> and <span style="font-weight:bold;">href</span> parameters must be written as <span style="font-weight:bold;">expr:src</span> and <span style="font-weight:bold;">expr:href</span> respectively. <br /><br /><a href="http://photos1.blogger.com/blogger/1916/3748/1600/image%231.jpg"><img style="display:block; margin:0px auto 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/1916/3748/320/image%231.jpg" border="0" alt="" /></a><br /><br />Hope you will enjoy this new hack. <br /><br />Hoctro (9/2006)<br />Blog: http://hoctro.blogspot.com/<br /></span>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-26360202124382802992008-09-13T12:20:00.000-07:002008-09-13T12:21:23.110-07:00Archived Post: My First Blogger Template AttemptDear Friend,<br /><br />I'm happy to announce my first hack that I improved based on the original hack from Hackosphere (<a href="http://hackosphere.blogspot.com/">http://hackosphere.blogspot.com/</a>). Many thanks to Mr. Ramani for his hacking ability and his willingness to share with the rest of us.<br /><br />My hack is based on his hack of showing the "titles only" if you click on a monthly or label listing. Instead of showing the content of all the posts, it'll only show the titles. My improved hack is based upon that by not even showing the date that a post is created, and I also make the posts indented as a nice bulleted list (that you can use CSS to change its appearance, btw.)<br /><br /><a href="http://photos1.blogger.com/blogger2/7393/928438932984448/1600/test.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://photos1.blogger.com/blogger2/7393/928438932984448/400/test.jpg" alt="" border="0" /></a><br /><br /><br />Below is the complete code of the hack. <strong>I also fixed the bug of the date not showing up in the Main Page / and the Main Page not lined up with the latest comments/posts - Thanks a bunch Vivek/ you're a great tester! pls see the line that is bold, and two other ul tags being commented out at front and back. (7 Sep 06)</strong><br /><font color="brown"><br /><code><br /> <!-- posts --><br /><span style="font-weight: bold;"> <span style="color: rgb(255, 0, 0);"><!-- <ul>--></span></span><br /> <div id='blog-posts'><br /> <b:loop values='data:posts' var='post'><br /> <!--Improved hack from Hackosphere By: Hoctro http://hoctro.blogspot.com - 6 Sep 2006 --><br /> <!-- This hack allows posts to be shown without dates and as a bullet list --><br /><br /> <b:if cond='data:post.dateHeader'><br /> <b:if cond='data:blog.pageType == "item"'><br /> <h2 class='date-header'><data:post.dateHeader/></h2><br /> </b:if><br /> <!--Fix Bug for not showing the date on main page - 7 Sep 2006 --><br /> <b:if cond='data:blog.homepageUrl == data:blog.url'><br /> <h2 class='date-header'><data:post.dateHeader/></h2><br /> </b:if><br /> </b:if><br /><br /> <!--Hack by Hackosphere - 6 Sep 2006 --><br /> <b:if cond='data:blog.homepageUrl != data:blog.url'> <br /> <b:if cond='data:blog.pageType != "item"'> <br /><b> <span style="color: rgb(255, 0, 0);"><ul><li><a expr:href='data:post.url'> <data:post.title/> </a></li></ul></span></b><br /> <b:else/> <br /> <b:include data='post' name='post'/> <br /> </b:if><br /> <b:else/> <br /> <b:include data='post' name='post'/><br /> </b:if><br /> <!--End of Hack by Hackosphere - 6 Sep 2006 --><br /> <br /> <b:if cond='data:blog.pageType == "item"'><br /> <b:if cond='data:post.allowComments'><br /> <b:include data='post' name='comments'/><br /> </b:if><br /> </b:if><br /> <!--End of Improved hack from Hackosphere By: Hoctro --><br /><span style="font-weight: bold;"> <span style="color: rgb(255, 0, 0);"><!-- </ul>--></span></span><br /> </b:loop><br /> </div><br /></code><br /></font><br /><br />Basically, you need to replace the <div id='blog-posts'> portion with the code above. Also, the original hack is <a href="http://hackosphere.blogspot.com/3006/08/new-hack-to-improve-your-labelsearch.html">here</a>, please refer to it on how to hack the relevant portion.<br /><br /><br /><br />I predict it's gonna be very much fun hacking Blogger, since the new way of hacking is very much like XSLT, the one I am already familiar with. It's actually much simpler than XSLT, as far as I can tell. I hope I will have many more hacks to share with you in the future.<br /><br />Thanks for your time and have a nice day!<br /><br />Hoctro (9/2006)<br />Blog: http://hoctro.blogspot.com/Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-57330360998697769562008-09-13T12:16:00.001-07:002008-12-09T07:35:17.400-08:00Archived Post: How To Modify the Blogger Template - The Core Javacript Library for JSON Widgets<br/><br/><br />This post explains how to make modifications to your New Blogger template, and also houses the latest Javascript JSON library code. This will make it easier for my others articles (and ultimately my readers) as those articles will be referring to this post on how to open the template and add new code.<br /><br /><a name='install'></a><br /><span style="font-weight:bold;">I. Installing Steps</span><br /><br /><span style="font-weight:bold;">A. Accessing the "Template" tab</span><br /><br />1. If you're from your blog, and you're logged in, click on <span style="font-weight:bold;">"Customize"</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/1410/800/1600/22368/intro1a.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/1410/800/400/903279/intro1a.jpg" border="0" alt="" /></a><br /><br />2. If you're from one blog, and you want to alter the template of another blog, click on <span style="font-weight:bold;">"Dashboard"</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/1410/800/1600/581969/intro1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/1410/800/400/350670/intro1.jpg" border="0" alt="" /></a><br /><br />3. If you're already on "Dashboard", click on <span style="font-weight:bold;">"Layout"</span><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/1410/800/1600/141638/intro2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/1410/800/400/61430/intro2.jpg" border="0" alt="" /></a><br /><br />4. if you're already inside the Setting page, click on the <span style="font-weight:bold;">"Template"</span> tab<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/1410/800/1600/708925/intro3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/1410/800/400/735990/intro3.jpg" border="0" alt="" /></a><br /><br />B. Change to "<span style="font-weight:bold;">Edit HTML</span>" page<br /><br />To see the template, click on <span style="font-weight:bold;">Edit HTML</span>. By default, the template does not expose the internal structure of each widget, so what you see actually is the short form of it. This is indeed a great thing, since you can see quickly how the template is made up from, in textual form. You could also insert the complete widget code of my hack (as instructed in the referred tutorials) right from this collapsed mode.<br /> <br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/1410/800/1600/675080/intro4.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/1410/800/400/661622/intro4.jpg" border="0" alt="" /></a><br /><br />1) Before you make any serious modifications, it's best to save a copy to your hard drive.<br /><br />2) Later on, you could always upload a good template up, overriding the current template.<br /><br />3) This is the toggle that switches between <span style="font-weight:bold;">"collapsed"</span> and <span style="font-weight:bold;">"explanded widget templates"</span> modes.<br /><br />4) To insert a new widget, enter the code inside the pair of "<span style="font-weight:bold;">b:section</span>" tags with <span style="font-weight:bold;">id='sidebar'</span>, anywhere in between any two singly "<span style="font-weight:bold;">b:widget</span>" lines. Later on, once the code is accepted, it's very easy to visually drag the widget from one place to another, in "<span style="font-weight:bold;">Page Element</span>" view.<br /><br /><span style="font-weight:bold;">C. To add CSS or JavaScript code:</span><br /><br />1) The preferred place to add CSS code is right in front of the closing <span style="font-weight:bold;">b:skin</span> tag<br /><a name='javascript_code'></a><br />2) The preferred place to add JavaScript code is right between the closing <span style="font-weight:bold;">b:skin</span> tag and the closing head tag.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/1410/800/1600/653141/intro5.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/1410/800/400/107125/intro5.jpg" border="0" alt="" /></a><br /><br />Also, if the hack is labeled as a "JSON Hack", make sure your feed setting is either "short" or "full", but not "None". Let me elaborate on this one:<br /><br />a. Make sure your feed settings look like this:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8oJWEkDZTW5wIvBa2jBsXMqrYACsUQdQ73PFc7SKU8yzCQESYKJLTCjM5wpSwN_74ZdjPtdtnsZ-58gfSEPNGwAxxlQZinlRo2_A9oV8XW9GNgzG41Af2kze7YkjTaiJ_XzeJHjz0PgI/s1600-h/feed3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8oJWEkDZTW5wIvBa2jBsXMqrYACsUQdQ73PFc7SKU8yzCQESYKJLTCjM5wpSwN_74ZdjPtdtnsZ-58gfSEPNGwAxxlQZinlRo2_A9oV8XW9GNgzG41Af2kze7YkjTaiJ_XzeJHjz0PgI/s400/feed3.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5021862390165431186" /></a><br /><br />b. and not like this:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy9JDkxkoJUrE83YIdeg1g6IwcDpPDftlxbTXi314iS9NLZjPByQrn8FPHKtwjq3pn1gumuvfrvHb01qK5egyTr4jJzbwK3aXwkuO1FxvaUTJAgtPCdWDiMVXDPsY5lTRibJmi6m9Vlvo/s1600-h/feed2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy9JDkxkoJUrE83YIdeg1g6IwcDpPDftlxbTXi314iS9NLZjPByQrn8FPHKtwjq3pn1gumuvfrvHb01qK5egyTr4jJzbwK3aXwkuO1FxvaUTJAgtPCdWDiMVXDPsY5lTRibJmi6m9Vlvo/s400/feed2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5021862544784253858" /></a><br /><br />Also, make sure in "Settings"->"Archiving", "Enable Post Pages?" is set to "Yes"<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJX7hHsWxFVRjHnKr0m4eA1Qf7Pa8Z_RjpBoiGLWkMK5l1hmpLDjVIh3_484nuDVFzaKyhmd0iBxT9lXzrebWCNhdQ0PRX_mGdk04qJ3Gm7QH6l3pQw21jk_LhD7W9zMxbPZyBZm9wLtg/s1600-h/feed4.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJX7hHsWxFVRjHnKr0m4eA1Qf7Pa8Z_RjpBoiGLWkMK5l1hmpLDjVIh3_484nuDVFzaKyhmd0iBxT9lXzrebWCNhdQ0PRX_mGdk04qJ3Gm7QH6l3pQw21jk_LhD7W9zMxbPZyBZm9wLtg/s400/feed4.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5021872629367464898" /></a><br /><br /><a name='install_core'></a><br /><span style="font-weight:bold;">II. Installing the core Javacript library object</span><br /><br />This is the only location where the Core Library will be posted. The reason I do this instead of making a link line to an external js file is because I don't want my users to have a bad feeling of not sure what's going on with the js. I want you to be in control on when you decide to update your existing library version with this latest code.<br /><br />You only need to place the code below <b>once</b> in your template, as the code is going to be shared among the calling widgets such as TabView, Unlimited Posts, and Unlimited Comments.<br /><br />Cut and paste the code and paste it <a href='#javascript_code'>between the closing </b:skin> tag and the closing </head> tag </a>: <br /><br /><font><br /><script type='text/javascript'><br />// Developed by Hoctro - All rights reserved 2007<br />// This credit must be included in all your derived usages.<br /><br />// "cb" is intended to be a common library, where different widgets would<br />// utitlize the shared operations such as getTitle, getLink, etc. from a json object.<br />var cb = {<br /><br />// search function requires these parameters:<br />// 1. query: a blogger address, such as "hoctro.blogspot.com",<br />// 2. type: type of return data, either "comments" or "posts",<br />// 3. start: the start-index parameter (where to start extracting data)<br />// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)<br />// 5. func: the returned function the json object will feed.<br /><br />search: function(query, type, start, increment, func) {<br /> var script = document.createElement('script');<br /> script.setAttribute('src', 'http://' + query + '/feeds/' + type + '/default?alt=json-in-script&amp;start-index='<br /> + start + '&amp;max-results=' + increment + '&amp;callback=' + func + '&amp;orderby=published');<br /> script.setAttribute('type', 'text/javascript');<br /> document.documentElement.firstChild.appendChild(script);<br />},<br /><br />// searchLabel function return a result of posts w/ a label query<br />// it requires these parameters:<br />// 1. query: a blogger address, such as "hoctro.blogspot.com",<br />// 2. an array of labels<br />// 3. func: the returned function the json object will feed.<br />searchLabel: function(query, label, func) {<br /> var script = document.createElement('script');<br /> script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) + <br /> '?alt=json-in-script&amp;callback=' + func + '&amp;orderby=published');<br /> script.setAttribute('type', 'text/javascript');<br /> document.documentElement.firstChild.appendChild(script);<br />},<br /><br />// getTotalResults needs the json object, and it'll return the total number of comments (or posts) of the blog.<br />getTotalResults: function(json) {<br /> return json.feed.openSearch$totalResults.$t;<br />},<br /><br />// getStartIndex gets the start index of a search inside an json object.<br />getStartIndex: function(json) {<br /> return json.feed.openSearch$startIndex.$t;<br />},<br /><br />// getLink return a href link if "name" matches the content inside "a" tags) of the link<br />getLink: function(entry, name) {<br /> var alturl;<br /><br /> for (var k = 0; k &lt; entry.link.length; k++) {<br /> if (entry.link[k].rel == name) <br /> alturl = entry.link[k].href;<br /> }<br /> return alturl;<br />},<br /><br />// getTitle gets the title of the title of an entry of a json object.<br />getTitle: function(entry) {<br /> return entry.title.$t;<br />},<br /><br />// getContent gets the content inside an entry of a json object.<br />getContent: function(entry) {<br /> return entry.content.$t;<br />},<br /><br />// getCommentAuthor: gets the commenter name inside an entry of a json object.<br />getCommentAuthor: function(entry) {<br /> return entry.author[0].name.$t;<br />},<br /><br />// Given a json label search, this function return the decoded label.<br />getLabelFromURL: function(json) {<br /> for (var l = 0; l &lt; json.feed.link.length; l++) {<br /> if (json.feed.link[l].rel == 'alternate') {<br /> var raw = json.feed.link[l].href;<br /> // The next two lines are borrowed from Ramani's Neo Template<br /> // code. Thanks Ramani!<br /> var label = raw.substr(raw.lastIndexOf('/')+1);<br /> return decodeURIComponent(label);<br /> }<br /> }<br />},<br />txt : function (s) {<br />return s + " Widget by &lt;a href='http://hoctro.blogspot.com" + "'&gt;Hoctro&lt;/a&gt;";<br />}<br />};<br /></script><br /></font><br />Thank you for reading.Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-14578416322237221492008-09-13T12:10:00.000-07:002011-08-21T10:54:07.046-07:00Archived Post: Tab ViewDear Friend,<br />
<br />
Now that I have the new framework for making widgets in store, I feel confident and start trying to create a new tab widget - using labels as tabs, similar to this Yahoo! widget.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPSd9XYp95aNMvP0A5_rY5ImErkcnJEWavfgDqXBSM5_iH8MN89D5vvojE7au_lHDajJC8APuosM8gxWheN2iSGdbuLJsegixEc0kdxRcnQL7Z7UBqYgfGxGdAvD6CbIWuu0k6ylITcqE/s1600-h/tabView1.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5065687936633795394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPSd9XYp95aNMvP0A5_rY5ImErkcnJEWavfgDqXBSM5_iH8MN89D5vvojE7au_lHDajJC8APuosM8gxWheN2iSGdbuLJsegixEc0kdxRcnQL7Z7UBqYgfGxGdAvD6CbIWuu0k6ylITcqE/s400/tabView1.jpg" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" /></a><br />
<br />
With the wonderful help of <a href="http://developer.yahoo.com/yui/tabview/">Yahoo! TabView widget</a>, the programming time reduces quite a bit.<br />
<br />
You can see the result from my homepage:<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslogCCodoiCmcqiG9NjnI_-Tcy89jZikyXKozAVALHSK2SX0b9QxuIoKPaifN6gUjIDgLsHo3CSQ3RXqR1w75SYBdvlUY3sBVy1dXRURpkIrNloxDNGxr2DoIkvCJ-cGYRla_OhOanO4/s1600-h/tabv1.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5066454910418678626" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslogCCodoiCmcqiG9NjnI_-Tcy89jZikyXKozAVALHSK2SX0b9QxuIoKPaifN6gUjIDgLsHo3CSQ3RXqR1w75SYBdvlUY3sBVy1dXRURpkIrNloxDNGxr2DoIkvCJ-cGYRla_OhOanO4/s320/tabv1.jpg" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" /></a><br />
If you want to install this onto your blog, follow these instructions.<br />
<br />
<b>Step 1: Installing the core Javacript library object</b><br />
<br />
First, follow the instructions from this article <a href="http://hoctro.blogspot.com/2006/11/hacking-technique-how-to-modify-beta.html#install">Hacking Technique: How To Modify a (Beta) Template</a>, in particular section <span style="font-weight: bold;">C.2 (for step 1 & 2) and B.4 (for step 3)</span>. <br />
<br />
Next, install <a href="http://hoctro.blogspot.com/2006/11/hacking-technique-how-to-modify-beta.html#install_core">the latest version of the Javacsript Core Library</a>.<br />
<br />
Save the template.<br />
<br />
<b>Step 2: Installing Yahoo! Tab View requirements</b><br />
<br />
Cut and paste this code below right after step 1's code (such that these code still stay before the closing </head> tag.). See instruction <a href="http://hoctro.blogspot.com/2006/11/hacking-technique-how-to-modify-beta.html#javascript_code">here</a> if you're still not sure.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/> <br />
<br />
<br />
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/> <br />
<br />
<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/><br />
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/> <br />
<br />
<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/> <br />
<br />
<br />
<style type='text/css'><br />
<br />
.yui-content {<br />
padding:1em; /* pad content container */<br />
}<br />
<br />
.yui-navset .yui-content {<br />
border:1px solid #ccc;<br />
}<br />
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {<br />
background-color:#fff;<br />
}<br />
<br />
.yui-navset .yui-nav li a {<br />
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;<br />
}<br />
.yui-navset .yui-nav li a em {<br />
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;<br />
padding:0.5em;<br />
}<br />
<br />
/* top oriented */<br />
<br />
.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */<br />
.yui-navset-top .yui-nav li a {<br />
border-bottom:1px solid #ccc;<br />
}<br />
<br />
.yui-navset-top .yui-nav .selected a { border-bottom:0; }<br />
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */<br />
</style><br />
<br />
<br />
Save the template.<br />
<br />
<b>Step 3: Installing the widget</b><br />
<br />
Add this code between any two "b:widget" tags, save the template, and you're almost done.<br />
<br />
<br />
<b:widget id='HTML102' locked='false' title='MultiTab Widget' type='HTML'><br />
<b:includable id='main'><br />
<div class='widget-content'><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != ""'><br />
<h2 class='title'<br />
><data:title></h2><br />
</b:if><br />
<div id='doc'><br />
<div><br />
<h2>Hoctro's Place</h2><br />
<div class='yui-navset' id='multiTab1'/><br />
</div><br />
<br />
<!--<br />
<div><br />
<h2>Hackosphere</h2><br />
<div class='yui-navset' id='multiTab2'/><br />
</div><br />
--><br />
<br />
</div><br />
<div id='103'/><br />
</div><br />
<br />
<script type='text/javascript'><br />
// Developed by Hoctro - All rights reserved 2007<br />
// This credit must be included in all your derived usages.<br />
var p1 = document.createElement('h6');<br />
document.getElementById('103').appendChild(p1);<br />
p1.innerHTML = cb.txt('TabView');<br />
<br />
function listOneTab(json, tabView, title, act) {<br />
var label = '';<br />
var text = '';<br />
var nPost = 10;<br />
<br />
if (title == "")<br />
label += cb.getLabelFromURL(json);<br />
else<br />
label += title;<br />
<br />
text += "<div id='" + label + "'><ul>";<br />
<br />
var numberPost = (json.feed.entry.length &lt;= nPost) ?<br />
json.feed.entry.length : nPost;<br />
<br />
for (var i = 0; i &lt; numberPost; i++) {<br />
var entry = json.feed.entry[i];<br />
text += "<li>" + "&lt;a href='" + cb.getLink(entry, "alternate")<br />
+ "'&gt;" + cb.getTitle(entry) + "</li>";<br />
}<br />
<br />
text += '</ul></div>';<br />
<br />
tabView.addTab( new YAHOO.widget.Tab({<br />
label: label,<br />
content: text,<br />
active : act<br />
}));<br />
<br />
<br />
}<br />
<br />
var blog1 = "hoctro.blogspot.com";<br />
var tabView1 = new YAHOO.widget.TabView('multiTab1');<br />
var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];<br />
function listTab1(json) {<br />
listOneTab(json, tabView1, "", false);<br />
}<br />
function listLatestPostsTab1(json) {<br />
listOneTab(json, tabView1, "Latest Posts", true);<br />
}<br />
function listLatestCommentsTab1(json) {<br />
listOneTab(json, tabView1, "Latest Comments", false);<br />
}<br />
<br />
// Activating calls!<br />
<br />
// Latest Posts<br />
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');<br />
<br />
// Latest Comments<br />
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');<br />
<br />
// Preferred Labels<br />
for (var i=0; i &lt; labels1.length; i++)<br />
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');<br />
<br />
/*<br />
var blog2 = "hackosphere.blogspot.com";<br />
var tabView2 = new YAHOO.widget.TabView('multiTab2');<br />
var labels2 = ['Neo','Widgets', "Blogger Power"];<br />
function listTab2(json) {<br />
listOneTab(json, tabView2, "", false);<br />
}<br />
function listLatestPostsTab2(json) {<br />
listOneTab(json, tabView2, "Latest Posts", true);<br />
}<br />
function listLatestCommentsTab2(json) {<br />
listOneTab(json, tabView2, "Latest Comments", false);<br />
}<br />
// Activating calls!<br />
// Latest Posts<br />
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');<br />
<br />
// Latest Comments<br />
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');<br />
<br />
// Preferred Labels<br />
for (var i=0; i &lt; labels2.length; i++)<br />
if (labels2[i]) cb.searchLabel("hackosphere.blogspot.com", labels2[i], 'listTab2');<br />
<br />
*/<br />
</script><br />
</b:includable><br />
</b:widget><br />
</data:title><br />
<br />
Save the template.<br />
<br />
After you install the above three easy steps, just change these things found in step 3' code:<br />
<br />
a. To change the title, look for this line:<br />
<br />
<h2><b>Hoctro's Place</b></h2><br />
<br />
<br />
b. modify the label tabs to become yours:<br />
<br />
var labels1 = [<b>"JSON Hacks", "Label Hacks", <br />
"Free Templates", "Notable Hacks"</b>];<br />
<br />
c. Change value below from 10 to any value you want for the maximum of posts per tab<br />
<br />
var nPost = <b>10</b>;<br />
<br />
d. then replace mine with your blog's name<br />
<br />
blog1 = "<b>hoctro.blogspot.com</b>";<br />
<br />
<br />
For advanced bloggers who would like to manipulate the CSS, "step 2" contains the information to do so. Also consult the <a href="http://developer.yahoo.com/yui/tabview/">Yahoo! TabView widget</a> tutorials and <a href="http://developer.yahoo.com/yui/examples/tabview/">examples </a>for other variations of these tab options.<br />
<br />
<br />
<br />
To add another tabview to this widget such as the picture below, please see <a href="http://hoctro.blogspot.com/2007/05/introducing-tabview-widget-part-2.html">part 2</a>.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7mxDHGXbJL63Jlp74sm3r5QG5nWhyopAvlm9WG9EtP1tEX95BOo1HwRYCcoGBpYxBMrDWyw1xntcJpRgNZA7nR6mMLR2W78JPmXwdkViv2hd-Hrd8OwlxQOh8gTilJCy0hHz114IBNQ/s1600-h/tabv2.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5066454914713645938" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7mxDHGXbJL63Jlp74sm3r5QG5nWhyopAvlm9WG9EtP1tEX95BOo1HwRYCcoGBpYxBMrDWyw1xntcJpRgNZA7nR6mMLR2W78JPmXwdkViv2hd-Hrd8OwlxQOh8gTilJCy0hHz114IBNQ/s320/tabv2.jpg" style="cursor: pointer; display: block; margin: 0px auto 10px; text-align: center;" /></a><br />
<br />
Until next time.<br />
<br />
<b><u>Update:</u></b><br />
* 24 May 07: A translation of this article to Indonesian by Bikin is available here: <br />
<a href="http://bikinblogger.blogspot.com/2007/05/tabview-widget-pengantar.html">http://bikinblogger.blogspot.com/2007/05/tabview-widget-pengantar.html</a><br />
<br />
*26 May 07: Wai Yan Lin translated also part 1, 2 & fav blogs application to Burmese here:<br />
<a href="http://waiyanlinn.blogspot.com/2007/05/tabview-widget.html">http://waiyanlinn.blogspot.com/2007/05/tabview-widget.html</a>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-1623144567238759552008-09-13T11:23:00.001-07:002008-09-13T12:11:25.053-07:00Archived Post: Some small tricks<br/><br/>Dear Friend,<br /><br />This post is a collection of all the little tweaks I've learned thoughout my last 5-month experience with the (then) <span style="font-weight:bold;">Blogger in Beta</span>, and now the<span style="font-weight:bold;"> New Blogger</span>. Some I've learned from the Blogger tutorial, some from the other hackers, and some from reading the template. I think it would be useful for certain people. I'll update this post as needed. Thanks.<br /><br /><h4>Question #1: What is the URL to get 99 latest posts?</h4><br /><br /><span style="font-weight:bold;">Answer:</span><br />Have a linklist widget, and put this URL as the link (replacing "hoctro" with your blog's name):<br /><br /><font><br />http://<span style="font-weight:bold;">hoctro</span>.blogspot.com/search/label/?max-results=99<br /></font><br /><br /><h4>Question #2: How to get 99 latest posts by clicking on an item of the "label" widget?</h4><br /><br /><span style="font-weight:bold;">Answer:</span><br />You need to open the template in expanded mode, then first look for this line:<br /><br /><font><br /><b:widget id='Label1' locked='false' title='Labels' type='Label'><br /></font><br /><br />then look for this line about 10+ lines below it<br /><br /><font><br /> <a expr:href='data:label.url'><data:label.name/></a><br /></font><br />change that to this<br /><br /><font><br /> <a expr:href='data:label.url + "?max-results=99"'><data:label.name/></a><br /></font><br /><br /><br /><h4>Question #3: I can't drag a widget to my header. How do I make it appendable, just like on the sidebar?</h4><br /><br /><span style="font-weight:bold;">Answer:</span><br />From dashboard, go to Layout->Template->Edit HTML and look for this line:<br /><br /><font><br /><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /></font><br /><br />You need to change it to:<br /><br /><font><br /><b:section class='header' id='header' maxwidgets='<span style="font-weight:bold;">10</span>' showaddelement='yes'><br /></font><br /><br />Now you can add <span style="font-weight:bold;">9</span> more widgets to your header, besides the default header itself.<br /><br /><br /><h4>Question #4: How do I change the title of the blog with a banner?</h4><br /><br />This below example is for the Minima template<br /><br />1. Go to Edit Html page, collapsed mode, look for the line:<br /><br /><span style="font-weight:bold;">#header-wrapper</span><br /><br />then replace that rule and one next to it to look like this:<br /><br />#header-wrapper {<br /> width:57.69em;<br /> *width:56.3em; /* IE */<br /> min-width:750px;<br /><br /> margin:0 auto 10px;<br /> //border:1px solid $bordercolor;<br /> min-height:200px;<br />background:url("<span style="font-weight:bold;">http://lh6.google.com/_h/5xBoc/s1600/baby.jpg</span>") no-repeat left top;<br /> }<br /><br />#header { <br /> margin: 5px;<br /> //border: 1px solid $bordercolor;<br /> text-align: center;<br /> display: none;<br />}<br /><br />The URL you see there - in bold - is the address of the picture. You could use Blogger to upload a picture, click on it to view the real size, then right click->properties to cut the URL from there.<br /><br />Below is the discussion on some other tweaks made to make things look right:<br /><br /><span style="font-weight:bold;">1. For #header-wrapper</span><br /><br /><span style="font-weight:bold;">min-width:750px;</span> - the minimum width shown would be 750px - you should set this to your picture size.<br /> <br /><span style="font-weight:bold;">//border:1px solid $bordercolor;</span> - // means commenting things out, in this case we don't want to show the box around the text<br /> <br /><span style="font-weight:bold;">min-height:200px;</span> - the minimum height shown would be 200px - you should set this to your picture height size.<br /><br /><span style="font-weight:bold;">2. For #header</span><br /><br /><span style="font-weight:bold;">//border: 1px solid $bordercolor;</span> - leave out the inner box.<br /><br /><span style="font-weight:bold;">display: none;</span> - not to display header texts by commenting them out.Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-17079736775350324542007-02-07T17:57:00.000-08:002008-12-09T07:35:22.714-08:00Getting to know your readers through FeedBurnerDear Friend,<br /><br />As some of you might have noticed, recently I have a new feed - courtesy of Feedburner - from my sidebar that says: <span style="font-weight:bold;">Subscribe in a reader</span>. To be honest with you, I didn't see the purpose of having yet another feed, besides the default one we all have from Blogger (mine is <a href="http://hoctro.blogpost.com/feeds/posts/default ">http://hoctro.blogpost.com/feeds/posts/default</a> .) But a recent feature from FeedBurner makes it all worthwhile. Feedburner now allows you to see who is coming to your site, what are they interested in reading, so on and so forth.<br /><br />To start with, you need to go to their site:<br /><br /><a href="http://www.feedburner.com/fb/a/home">http://www.feedburner.com/fb/a/home</a><br /><br />Next, register an account with FeedBurner by clicking on the "Register" at the top right of its homepage:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_hO0v-S1ryQ8/RcqGUkWO2uI/AAAAAAAAARk/NzQROzB-yUA/s1600-h/feed3.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_hO0v-S1ryQ8/RcqGUkWO2uI/AAAAAAAAARk/NzQROzB-yUA/s400/feed3.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5028979621825010402" /></a><br /><br />Once you're done with registration, you'll be greeted with the <span style="font-weight:bold;">Dashboard</span>. Next, you need to enter your blog address in the box, and follow the instructions.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_hO0v-S1ryQ8/RcqQQkWO2zI/AAAAAAAAASo/HOgN-OQoFaE/s1600-h/feed8.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_hO0v-S1ryQ8/RcqQQkWO2zI/AAAAAAAAASo/HOgN-OQoFaE/s400/feed8.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5028990548221811506" /></a><br /><br />This is my dashboard's look at the moment, after <span style="font-weight:bold;">Hoctro's Place</span> is added:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_hO0v-S1ryQ8/RcqG3kWO2vI/AAAAAAAAARs/pruhlNSnCXY/s1600-h/feed4.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_hO0v-S1ryQ8/RcqG3kWO2vI/AAAAAAAAARs/pruhlNSnCXY/s400/feed4.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5028980223120431858" /></a><br /><br />After clicking on your feed's title, the "<span style="font-weight:bold;">Analyze</span>" tab is opened. Next, click on <span style="font-weight:bold;">"Standard Stats</span>", under "<span style="font-weight:bold;">Services</span>" on the left sidebar. The <span style="font-weight:bold;">Standard Stats</span> settings appear. In the "<span style="font-weight:bold;">Choose One</span>" dropdown, select <span style="font-weight:bold;">Blogger</span>:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_hO0v-S1ryQ8/RcqNIEWO2wI/AAAAAAAAASE/y8EMfMc-Ycs/s1600-h/feed5.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_hO0v-S1ryQ8/RcqNIEWO2wI/AAAAAAAAASE/y8EMfMc-Ycs/s400/feed5.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5028987103658040066" /></a><br /><br />A tutorial opens in a new popup window, you need to follow exactly what it says:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_hO0v-S1ryQ8/RcqNaUWO2xI/AAAAAAAAASM/_fGS0yWbXVk/s1600-h/feed6.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://4.bp.blogspot.com/_hO0v-S1ryQ8/RcqNaUWO2xI/AAAAAAAAASM/_fGS0yWbXVk/s400/feed6.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5028987417190652690" /></a><br /><br />Essentially, what you have to do is to embed a piece of javascript code to your template, under the Blog widget, so FeedBurner could collect data on your blog.<br /><br />Once you successfully embedded the code, leave it there for a couple of days, and you'll be able to see collected data later in a nice and easy-to-understand manner, through the newly added "<span style="font-weight:bold;">Site stats</span>" submenu. For example, from the <span style="font-weight:bold;">Dashboard </span>option, I know how many people visit my blog today, and what are the most popular posts:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_hO0v-S1ryQ8/RcqOn0WO2yI/AAAAAAAAASU/Oh-NZb2tmV0/s1600-h/feed7.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_hO0v-S1ryQ8/RcqOn0WO2yI/AAAAAAAAASU/Oh-NZb2tmV0/s400/feed7.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5028988748630514466" /></a><br /><br />There's a lot more in store, so if you have time, then register and see for yourself. You'll be amazed at the wealth of information FeedBurner could offer.<br /><br />Have a wonderful day,<br /><br />HoctroHoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-14492393441180051602006-11-10T19:20:00.000-08:002008-09-20T15:24:46.859-07:00Corrrecting Anchoring TagsDear Friend,<br /><br />Every one of my posts has a story with it, whether it is a request from an user, or a need of myself to tweak something to look more interesting or at least to make it right. This time is no different :)<br /><br />Some of my readers will notice that I just recently abandon the comment approval option. You could post a comment, and will see it instantly. Well, that comes with a price. I have to monitor the <span style="font-weight:bold;">Latest Comments Feed</span> more often, or my blog will be bombarding with spamming comments. <br /><br />One of the things I notice, because of this new change-of-mind, is that the comment link only sends me to the top of the post. However, I know that in HTML you could have a tag with an unique name and the link will lead to the right place. Come to find out, the link is correctly formatted, such as this:<br /><br />http://hoctro.blogspot.com/2006/share.html<span style="font-weight:bold;">#3190550298489538229</span><br /><br />but the actual HTML code in the content of the comment looks like this<br /><font color="brown"><br /><a name=<span style="font-weight:bold;">'comment-3190550298489538229'</span>></a><br /></font><br />where it should be coded as<br /><font color="brown"><br /><a name=<span style="font-weight:bold;">'3190550298489538229'</span>></a><br /></font><br />Looks like the right hand doesn't talk to the left hand, or in this case the person who codes the post widget doen't talk to the guy who codes the feed widget. Just kidding, we love you Blogger guys, really!!! <br /><br />Now that I know what to fix, I need to find where to fix. After a while, I find the culprit :-)<br /><br />If you want to fix this problem too, then follow these steps:<br /><br /><span style="font-weight:bold;">1. Open Template->Edit HTML.</span> Turn the option "Expand Widget Templates" on.<br /><br /><span style="font-weight:bold;">2a. Locate the widget named Blog1</span>, by looking for this line:<br /><font color="brown"><br /><b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'><br /></font><br /><span style="font-weight:bold;">2b. Locate this line (a function[includable]) with id='comments'</span><br /><font color="brown"><br /><b:includable id='comments' var='post'><br /></font><br /><span style="font-weight:bold;">2c. Look for this line about 10+ lines below:</span><br /><font color="brown"><br /><a expr:name='"comment-" + data:comment.id'/><br /></font><br />and just simply take out the <span style="font-weight:bold;">["comment-" + ]</span> for the line to become:<br /><font color="brown"><br /><a expr:name='data:comment.id'/><br /></font><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/link1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/link1.jpg" border="0" alt="" /></a><br /><br />and you're done.<br /><br />You can see a sample by clicking on any "latest comment" in my blog's feed (or <a href="http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html#4552285736464303992">try this one out</a>, it goes to the end of my "killer post") and it'll take you right to where the comment is located. Now I can check out the users' comment more effectively.<br /><br />Cheers,<br /><br />HoctroHoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-50725285432287428572006-11-07T14:53:00.000-08:002008-09-20T15:24:46.993-07:00To Show or not to Show your template message<br/><br/>Dear Friend,<br /><br />Phoenix, one of my readers, noticed that there is some sort of a message bar showing, whenever he clicks on one of the "Label" search. I noticed that too, and knowing Beta code, I thought they must have embedded this new piece of code somewhere on the Blog1 widget. <br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/beta.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/beta.jpg" border="0" alt="" /></a><br /><br />Indeed it does, and this new feature only happens to blogs that are created recently. I think this is some sort of a "wrapped-up" feature as part of their <a href="http://buzz.blogger.com/2006/11/blogger-beta-feature-complete.html">"Blogger Beta: Feature Complete!"</a>.<br /><br />Here it is, the single function call which causes the message to display:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/beta2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/beta2.jpg" border="0" alt="" /></a><br /><br />So you see, the line is inside the Blog1 widget, under the <span style="font-weight:bold;">"main" includable</span>. Turning it off is quite simple if you want to. You can either erase the line or put a pair of comment code like so:<br /><font color='brown'><br /><!-- <b:include data='top' name='status-message'/> --><br /></font><br />and the message will disappear from then on.<br /><br />Cheers,<br /><br />Hoctro<br /><br /><hr/><br /><span style="font-weight:bold;">Update:</span> Please see the <a href="http://hoctro.blogspot.com/2006/11/last-single-new-feature-of-blogger-in.html">comments</a> of this post to have more info on this Beta's message usage. Thanks a bunch, Phydeaux3 & Bravery Onions!Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-36194960656552518632006-10-10T06:06:00.000-07:002008-09-20T15:24:47.893-07:00Showing Hint under the Title to View a Page With Comments<br /><br />Dear Friend,<br /><br />My friend Carlos asks me how to let readers to see posts with comments. I think this is not possible while a viewer is seeing a label or archived query, or if he or she is looking at the home page. I guess the technical reason why Blogger in Beta didn't implement that, is just simply try to avoid a potentially large stream of data to arrive to the viewer's PC. Imagine a situation where you query a category that has 20 posts in each, each post with 20-30 comments. It'll take quite a while to display that page to your screen.<br /><br />My work-around to this would be to give a hint to the reader to click on the title of the post in order for him or her to read both the full post and the comments.<br /><br />If you like this solution, then follow these simple steps:<br /><br /><strong>1. Locate the Blog1 widget</strong><br /><font color="brown"><br /><b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'><br /><br /></font><br /><br /><strong>then the includable named "post"</strong><br /><font color="brown"><br /><b:includable id='post' var='post'><br /></font><br /><br /><strong>2. Insert the <u>seven</u> lines in bold to the code</strong>. What this does is to check if you're allowing comment for a post, your post has at least one comment ( !=0 ), and you are not on the full post (item) page, then insert the hint. Feel free to use your HTML expertise to alter the simple tags I have, or change the text to become clearer.<br /><br /><font color="brown"><br /><b:includable id='post' var='post'><br /> <div class='post uncustomized-post-template'><br /> <a expr:name='data:post.id'/><br /> <b:if cond='data:post.title'><br /> <h3 class='post-title'><br /> <b:if cond='data:post.url'><br /> <a expr:href='data:post.url'><data:post.title/></a><br /> <b:else/><br /> <data:post.title/><br /> </b:if><br /> </h3><br /><strong><br /> <b:if cond='data:post.allowComments'><br /> <b:if cond='data:post.numComments != 0'><br /> <b:if cond='data:blog.pageType != "item"'><br /> <div><i>(For full text with comments please click on the title)</i></div><br /> </b:if><br /> </b:if><br /> </b:if><br /></strong><br /> </b:if><br /></font><br /><br />I apply this fix to my webpage, so you can see how this works.<br /><br />Have a wonderful day,<br /><br />HoctroHoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-16211631107626478512006-10-08T21:56:00.000-07:002008-09-20T15:24:48.215-07:00Blogger Hack: Adding Introductions<br /><br />Dear Friend,<br /><br />Sometimes a little introductory paragraph or two helps "break the ice" between you and your readers, so they know what they are about to read, rather than just guessing based on one or two "label" words. You can see the new hack in effect on my site. Select on "Blogger Beta"->"My Hacks", for example, will display a little introduction first, then all the hack articles.<br /><br />Below are the steps on how to implement this hack. As usual, make a template backup copy, then try it on your test blog first. Also, remember to check on "Expand Widget Templates."<br /><br /><span style="font-weight:bold;">Step 1: Add "introduction" function to Blog1 widget</span><br /><br />First, locate the widget by looking for this line:<br /><font color="brown"><br /><span style="font-weight:bold;"><b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'></span><br /></font><br />Once you see it, look for this line:<br /><font color="brown"><br /><span style="font-weight:bold;"><b:includable id='main' var='top'></span><br /></font><br />Then paste this code right in front of it:<br /><font color="brown"><br /><b:includable id='sub-introduction' var='data:posts'><br /><!-- **Introduction Hack - by Hoctro 10/2006 hoctro.blogspot.com ** Step 1 **<br /><br />**** --><br /><b:if cond='data:blog.pageType != "item"'><br /> <b:loop values='data:posts' var='post'><br /> <!-- Check for Homepage case --><br /> <b:if cond='data:blog.url == data:blog.homepageUrl'><br /> <b:if cond='data:post.title == "Introduction"'><br /> <div class='post'><br /> <div class='post-body'><br /> <p><data:post.body/></p><br /> </div><br /> </div><br /> </b:if><br /> </b:if><br /> <!-- Check for matched labels --><br /> <b:loop values='data:post.labels' var='label'><br /> <b:if cond='data:post.title == data:label.name'><br /> <div class='post'><br /> <div class='post-body'><br /> <p><data:post.body/></p><br /> </div><br /> </div><br /> </b:if><br /> </b:loop><br /></b:loop><br /></b:if><br /></b:includable><br /></font><br /><br /><span style="font-weight:bold;">Step 2: Modify the main includable of Blog1 widget</span><br /><br />Scroll down to this line again,<br /><br /><font color="brown"><br /><span style="font-weight:bold;"><b:includable id='main' var='top'></span><br /></font><br /><br />then look for the portion of code that starts and ends with these lines,<br /><br /><font color="brown"><br /><span style="font-weight:bold;"><br /> <div id='blog-posts'></span><br /><br />...<br /><span style="font-weight:bold;"><br /> <!-- navigation --><br /> <b:include name='nextprev'/></span><br /><br /></font><br /><br /><br />You are going to replace everything in between with these lines,<br /><br /><font color="brown"><br /><!-- **Introduction Hack - by Hoctro 10/2006 hoctro.blogspot.com ** Step 2 **<br /><br />**** --><br /> <b:include name='sub-introduction' values='data:posts'/><br /> <b:loop values='data:posts' var='post'><br /> <b:if cond='data:post.title == "Introduction"'><br /> <b:if cond='data:blog.pageType == "item"'><br /> <b:include data='post' name='postQuickEdit'/> <br /> <b:include data='post' name='post'/><br /> </b:if><br /> <b:else/><br /> <b:if cond='data:post.dateHeader'><br /> <h2 class='date-header'><data:post.dateHeader/></h2><br /> </b:if><br /> <b:include data='post' name='postQuickEdit'/> <br /> <b:include data='post' name='post'/><br /> <b:if cond='data:blog.pageType == "item"'><br /> <b:if cond='data:post.allowComments'><br /> <b:include data='post' name='comments'/><br /> </b:if><br /> </b:if><br /> </b:if><br /> </b:loop><br /> </div><br /></font><br /><br /><strong>Step 3: Name your new introductory posts with "special" titles</strong><br /><br />Name your "special" new introductory posts' titles with exactly the same label names. for example, for the introductory post of "My Hack" to show correctly on my homepage, I had to name the title as "Blogger_Beta*My_Hacks" (I use my own's two level tab hack, hence the star (*) symbol in the middle) Also, after composing this special post, you need to change the date to some time in the past, so it will not show up as the latest. Also, if your introductory post has more than one label (which you shouldn't do,) make sure the last label is the same as the post's title. <br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/intro1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/intro1.jpg" border="0" alt="" /></a><br /><br />here is the result,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/intro1a.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/intro1a.jpg" border="0" alt="" /></a><br /><br /><br />For an introduction in your homepage, you will need something different. You need to create a post with the title "Introduction", <span style="font-weight:bold;">do not</span> assign a label (leave it blank), and set the date to a distant future! (I owe Hans from "Beautiful Beta" for this "set-in-a-future-date", by the way. Thanks! Hans.) This will make sure the post always includes in the homepage's post collection, thus it will show up. When displayed, this post will not show a title nor allow any comment from the readers.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/intro2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/intro2.jpg" border="0" alt="" /></a><br /><br />Here is the result,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/intro2a.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/intro2a.jpg" border="0" alt="" /></a><br /><br />That's all it takes to have introductory paragraphs to show up on your blog. I hope you will able to make use of this hack.<br /><br /><span style="font-weight:bold;"><br />Technical Comments:</span><br /><br />Below are my technical comments, explaining the hack's logic. If you are interested in then read on. You're not required to understand my explanations to make it work on your blog.<br /><br />1. I'm glad I am finally able to write another hack without the help of JavaScript. There is nothing wrong with JavaScript, it's just that stretching beta's own simple language is really fun. Indeed, beta's template doesn't need any Javascript at all, and it still looks great.<br /><br />2. <span style="font-weight:bold;">In Step 1: the "introduction" function</span>, I create a loop, thus in effect make Blog1 loops through its post collection twice. That's how the introductory post can bubble up to be the first in the list. Inside the loop, I have two cases:<br /><br />-If the reader is at homepage, then check to see if one of the post has the title of "Introduction." If so, prints the body only. This post must not have a label assigned.<br /><br />- Next, I create another loop to go thru all the labels, and if one of them match the post's title, then also prints the body.<br /><br />3. <span style="font-weight:bold;">In Step 2</span>, the goal is completely different. We want the introduction not to show up twice, yet at the same time it must be visible in the item page, if someone clicks on it from the archived list, hence the if-then-else structure.<br /><br />I hope you will find some good use of both the hack and its source code as well.<br /><br />Have a wonderful day.<br /><br />Hoctro<br />(10/8/2006)Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-37598605840842119352006-10-03T05:53:00.000-07:002008-09-20T15:24:48.434-07:00How to add a new CSS parameter to your Blogger template<br /><br />Dear Friend,<br /><br /><a href="http://www.blogger.com/profile/30095290">Cecilia</a> left a comment asking me if I know anything about changing the default background of the blog. As usual, I go looking for answers in several of my CSS books (<strong>Bulletproof Web Design</strong>, <strong>CSS CookBook</strong>, <strong>Eric Meyer on CSS</strong>, etc.) For this one, the answer is right on Chapter 1 of the "Bulletproof Web Design" book. So here it is, if you have one of the Minima designs, please alter the equivalent tags of the template's CSS portion like this:<br /><br /><font color="brown"><br /><br />body {<br /> <strong>/*background:$bgcolor;*/</strong><br /> margin:0;<br /> color:$textcolor;<br /> font:x-small Georgia Serif;<br /> font-size/* */:/**/small;<br /> font-size: /**/small;<br /> text-align: center;<br /> <strong>background: $bgcolor url(http://photos1.blogger.com/blogger2/7873/821550570340913/1600/bg.gif) repeat-x top left;</strong><br /> }<br /><br /><br />/* Header<br />-----------------------------------------------<br /> */<br /><br />#header-wrapper {<br /> width:660px;<br /> margin:0 auto 10px;<br /> border-bottom:1px solid <strong>$bordercolor</strong>;<br /> }<br /><br />#header { <br /> margin: 5px;<br /> <strong> /*border: 1px solid $bordercolor;*/</strong> text-align: center;<br /> color:$pagetitlecolor;<br />}<br /><br /><br />/* Outer-Wrapper<br />----------------------------------------------- */<br />#outer-wrapper {<br /> width: 660px;<br /> margin:0 auto;<br /> padding:10px;<br /> text-align:left;<br /> border: 1px solid <strong>$bordercolor</strong>;<br /> font: $bodyfont;<br /> <span style="font-weight:bold;">background: #fff;</span><br /> }<br /><br /></font> <br /><br /><u><strong>Discussion:</strong></u><br /><br /><span style="font-weight:bold;">*</span> In CSS, if you want some effects to be temporary disabled, use this /* xxxxxx */ format. Notice that a comment inside another comment is not acceptable, such as<br /><br />/* xxx <strong>/* xxxxxx */ </strong>xxx */ <br /><br /><br /><span style="font-weight:bold;">*</span>This line, in particular, adds a faded yellow picture to the top-left of the screen, and repeats that picture in the horizontal (x) direction. <br /><font color="brown"><br /> <strong>background: $bgcolor url(http://photos1.blogger.com/blogger2/7873/821550570340913/1600/bg.gif) repeat-x top left;</strong><br /></font><br /><br /><span style="font-weight:bold;">*</span> In addition, I tweak some code so that instead of the default two boxes around my title, now I only have a line at the bottom. Since the line is added with <strong>same color </strong>as the border's, I can change it visually with the <strong>"Font and Color"</strong> Editing option.<br /><font color="brown"><br />#header-wrapper {<br /> width:660px;<br /> margin:0 auto 10px;<br /><strong> border-bottom:1px solid <strong>$bordercolor</strong>;</strong><br /> }<br /></font><br /><br /><a href="http://photos1.blogger.com/blogger2/1410/800/1600/css.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/css.jpg" border="0" alt="" /></a><br /><br /><span style="font-weight:bold;">*</span> You can add more font and color variables to the template, and they will show up in the "Font and Color" design tab. What this means is that you will have many more options to play around with, not just the default ones from Blogger templates.<br /><br />For example, I could create a new color variable (inside the <b:skin> tag at the front of the template):<br /><font color="brown"><br /> <Variable name="commenttextcolor" description="Comment Text Color"<br /> type="color" default="#999" value="#999999"><br /></font><br /><br />and it would show up in the "Font and Color" tab,<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/comment.0.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/comment.0.jpg" border="0" alt="" /></a><br /><br />This new variable has a name so you can add later as <strong>$commenttextcolor</strong> in the actual CSS code, a description name for it to show up in "Font and Color" design tab, the type of "color", and a default and actual value. <i>I think Blogger will write whatever your choice back to this "value" so your template is always up-to-date and independent of Blogger's database.</i><br /><br />Now that you have a variable, you can apply that to the CSS code, just like any other default variables.<br /> <br /><span style="font-weight:bold;">*</span> For my Vietnamese blog, I have used the same code showing in this article to modify its appearance. Please <a href="http://hoctroviet.blogspot.com">take a look.</a><br /><br />Have a nice day, <br /><br />Hoctro (10/2006)<br />Blog: http://hoctro.blogspot.com/Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-47657962764597268352006-10-01T20:17:00.000-07:002008-09-20T15:24:48.509-07:00Showing a Hint on Where to Post a Comment<br /><br />Dear Friend,<br /><br /><span style="font-weight:bold;">Nanny22girls</span> from <span style="font-weight:bold;"><a href="http://groups.google.com/group/blogger-help">Google Help Groups: Customizing Templates</a><br /></span> asks if she could reword the comment line at the end of each post in index pages to say "Leave a comment here", along with the number of comments.<br /><br />After looking into it, here is my quick fix:<br /><br />In Template->Edit Html, check on "Expand Widget Templates" to view the entire template. Then, locate <span style="font-weight:bold;"><b:includable id='post' var='post'></span>, and keep scrolling down to see this:<br /><font color="brown"><br /><span class='post-comment-link'><br /><span style="font-weight:bold;"> <b:if cond='data:blog.pageType != "item"'><br /><br /> <b:if cond='data:post.allowComments'><br /> <a class='comment-link' <br />expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br /> <b:if cond='data:post.numComments == 1'>1 <br /> <data:top.commentLabel/><b:else/><data:post.numComments/> <br /> <data:top.commentLabelPlural/></b:if></a><br /> </b:if><br /> </b:if></span><br /> </span> <br /></font><br />You are going to replace the code in <span style="font-weight:bold;">bold</span> with this code:<br /><font color="brown"><br /><b:if cond='data:post.allowComments'><br /> <b:if cond='data:post.numComments == 1'>1 <br /><span style="font-weight:bold;">Comment</span><!--<data:top.commentLabel/>--><br /> <b:else/><data:post.numComments/> <br /><data:top.commentLabelPlural/><br /> </b:if><br /> <a class='comment-link' expr:href='data:post.addCommentUrl' <br />expr:onclick='data:post.addCommentOnclick'><span style="font-weight:bold;">Leave your comment here</span></a><br /></b:if><br /></font><br />Notice there is a space at the end of "1" before the code goes to the next line, and the same thing happens with the <data:post.numComments/>. If you don't leave a space, then there won't be a space between the number and the word comment (or comments.) Notice I fix the "<span style="font-weight:bold;">1 Comments</span>" bug too.<br /><br />Here is the result:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/quickfix.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/quickfix.jpg" border="0" alt="" /></a><br /><br />and the "<span style="font-weight:bold;">1 comments</span>" bug:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/comment.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/comment.jpg" border="0" alt="" /></a><br /><br />I think this enhancement really makes commenting more easier, since the link on where to add your comment now is easier to look for.<br /><br />Have a nice day,<br /><br />Hoctro (9/2006)<br />Blog: http://hoctro.blogspot.com/Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.comtag:blogger.com,1999:blog-8038060665822630154.post-50642073070410879902006-09-30T22:39:00.000-07:002008-09-20T15:24:48.628-07:00Hacking Technique: On Making a New Hack<br /><br />Dear Friend,<br /><br />This weekend I was working on a brand new hack <i>code name</i> "<span style="font-weight:bold;">Site Map</span>", that would let you see all of your posts (theoretically up to 999 possible posts) as a list of all labels and their belonging posts. Here is an example of such a list:<br /><font color="navy"><br />...<br /><span style="font-weight:bold;">Art</span><br /> *Picasso's Guernica<br /> *Da Vinci's Mona Lisa<br /> *Dali: What do we know about his works?<br /><span style="font-weight:bold;">Math</span><br /> *How to solve a quadratic equation?<br /> *Math in College: how tough it is?<br /> *Math in everyday use.<br /><span style="font-weight:bold;">Soccer</span><br /> *The Italians Wins the World Cup for the fourth time!<br /></font><br />and so on.<br /><br />Well, things go really well, and I'm at a good stopping point. What I have at the moment is a list of all the possible posts in a blog, in chronological order. You can <a href="http://blogger-beta-from-ground-up.blogspot.com/search/label/?max-results=999">click on this link</a>, or look at my <a href="http://blogger-beta-from-ground-up.blogspot.com/index.html">beta playground</a> and click on the "Listing of All Posts" to see the effect.<br /><br />I would not consider this as a hack, but I'd like to make some comments on the code on the technical side of things, in a hope that some of my readers would be interested in this and turn it into completely unexpected new hack(s). So, if you are interested, please read on.<br /><span id="fullpost"><br /><br />Here is my logic. First, I'm going to get all the posts in a blog. I think Blogger allows to retrieve up to 999 posts on a query.<br /><br />Now, the return data would be as a part of the Blog in the form of <span style="font-weight:bold;">data:posts</span>. This means I cannot create a new widget to retrieve and process the data, but I have to get it from the Blog1 widget itself. To have a clean cut between the new code and the old one, I will sub-out all the code to a function (Blogger calls this an includable), then in <span style="font-weight:bold;">Blog1</span>'s main includable I will call this function to do the job. Later on I have to do something so the rest of the full (999) posts' contents will not show up and slow down your computer, but for testing purpose, it's fine to see both new and current code.<br /><br />Here is the call to the new "<span style="font-weight:bold;">siteMap</span>" function:<br /><font color="brown"><br />... <br /><br /><b:includable id='main' var='top'><br /> <div id='blog-posts'><br /> <span style="font-weight:bold;"><b:include name='siteMap' values='data:posts'/></span><br /><br />...<br /></font><br /><br />Below is the current listing of the function. I will explain more in details. <span style="font-style:italic;">(If you want to try this of course you must edit away all the numbers at the front of each line.)</span><br /><br /><font color="brown"><br /><span style="font-weight:bold;">1 :</span><b:includable id='siteMap' var='data:posts'><br /><span style="font-weight:bold;">2 :</span><br /><span style="font-weight:bold;">3 :</span> <div class='sitemapHack'><br /><span style="font-weight:bold;">4 :</span> <div id='siteMapList'><br /><span style="font-weight:bold;">5 :</span> </div><br /><span style="font-weight:bold;">6 :</span> </div><br /><span style="font-weight:bold;">7 :</span><script language='javascript' type='text/javascript'><br /><span style="font-weight:bold;">8 :</span><br /><span style="font-weight:bold;">9 :</span> var currentUrl = "<data:blog.url/>";<br /><span style="font-weight:bold;">10:</span> if (currentUrl.search("max-results=999") != -1) {<br /><span style="font-weight:bold;">11:</span> var firstLine = "";<br /><span style="font-weight:bold;">12:</span> var tempLabel = "";<br /><span style="font-weight:bold;">13:</span> <b:if cond='data:blog.pageType == "index"'><br /><span style="font-weight:bold;">14:</span> <b:if cond='data:blog.url != data:blog.homepageUrl'><br /><span style="font-weight:bold;">15:</span><!-- second part : filling in data based on tags --><br /><span style="font-weight:bold;">16:</span> firstLine = firstLine + "<ul>";<br /><span style="font-weight:bold;">17:</span> <b:loop values='data:posts' var='post'><br /><span style="font-weight:bold;">18:</span> <b:if cond='data:post.title'><br /><span style="font-weight:bold;">19:</span> firstLine = firstLine + "<li><a expr:href='data:post.url'><data:post.title/></a></li>";<br /><span style="font-weight:bold;">20:</span> </b:if><br /><span style="font-weight:bold;">21:</span> </b:loop><br /><span style="font-weight:bold;">22:</span> firstLine = firstLine + "</ul>";/*1st line*/<br /><span style="font-weight:bold;">23:</span> </b:if><br /><span style="font-weight:bold;">24:</span> </b:if><br /><span style="font-weight:bold;">25:</span> obj = document.getElementById('siteMapList');<br /><span style="font-weight:bold;">26:</span> obj.innerHTML = firstLine;<br /><span style="font-weight:bold;">27:</span>}<br /><span style="font-weight:bold;">28:</span></script><br /><span style="font-weight:bold;">29:</span></b:includable><br /></font><br /><br /><span style="font-weight:bold;">Line 1 </span>declares the function as siteMap, with the passing value is the collection of all the posts.<br /><span style="font-weight:bold;"><br />Line 3 thru 6</span> contain the placeholder of the hack's contents. We will keep adding text to a variable declared in line 11, and at the end write all data to this div. As mentioned in my previous article entitled <a href="http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-javascript-you.html">"JavaScript, you completed me!"</a>, this portion of the code I follow exactly from Ramani of Hackosphere.<br /><br /><span style="font-weight:bold;">Line 7 </span>declares that we are entering Javascript, and line 27 exits this effect. While we are in JavaScript, you cannot write something like <li> and expect the code to pick this up and turn it into real html code. What you have to do is to write all of that HTML code to a string variable, as we shall see shortly.<br /><br /><span style="font-weight:bold;">Line 9</span> contains the secret of JavaScript/Beta integration. Whatever inside the two double quotes will turn into a string and is assigned to the variable <span style="font-weight:bold;">currentURL</span>. A look at the runtime code confirms this fact.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/sitemap1.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/sitemap1.jpg" border="0" alt="" /></a><br /><br /><br />In fact, by reading the generated source code, I was able to find out many bugs, while programming the code in Beta's HTML edit tool.<br /><br /><span style="font-weight:bold;">Line 10 </span>performs a search to see if the text <span style="font-weight:bold;">max-results=999</span> is inside the currentURL variable (if it's different than -1 then it is, because the returning value indicated the location of the first occurence if there is a match.)<br /><br />Now that it's matched, <span style="font-weight:bold;">line 11 & 12</span> define some blank texts, while <span style="font-weight:bold;">line 13 & 14</span> perform the checks to see if this is the archive/label kind of returned posts. As you might have known, there are three possible kinds of data that <span style="font-weight:bold;">data:posts</span> collection represents. If you are in homepage, data:posts represents the contents of all the posts you decided to show in the front page, whether it is one or ten posts. On the other hand, if you select on a label or a month/day/year archived link, data:posts represents all the possible posts resulting from that query. Finally, if you click on a link to the post, data:posts represents the actual post, so there would be exactly one (1) post in the collection.<br /><br />In Beta templating language, there aren't any <span style="font-weight:bold;">AND</span> or <span style="font-weight:bold;">OR</span> logic for you to combine the two conditions into one if statement, so I had to make two if statements as shown in line 13 & 14. If the current page <span style="font-weight:bold;">is</span> an indexed type <span style="font-weight:bold;">AND it's not</span> at the same time the front page, then we hit the gold mine!<br /><br /><span style="font-weight:bold;">Line 16</span> starts the string text with an <span style="font-weight:bold;">ul</span> tag.<br /><br /><span style="font-weight:bold;">Line 17 thru line 21 </span>set up a nice loop where each post's name is tugged inside its link, in order for you to be able to click on it to lead you to the right item post. In line 19 <span style="font-weight:bold;">firstLine </span>variable keeps adding more titles onto itself. In the generated code, the result is super lightweight chunk of code, since we only add Blogger to pass back titles and url only. You will also notice that the b:loop logic is executed on the server side, since what we see on the client side (our generated code) is <span style="font-weight:bold;">the result of the content of each loop</span>.<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger2/1410/800/1600/sitemap2.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger2/1410/800/400/sitemap2.jpg" border="0" alt="" /></a><br /><br /><br />Noticed in <span style="font-weight:bold;">line 18</span>, the title is drawn only if it exists.<br /><br />Once the loop is completed, we close the ul tag and the ifs as in <span style="font-weight:bold;">line 21 thru 24.</span><br /><br />As previously noted, we look for the unique id siteMapList, then write the content to it in <span style="font-weight:bold;">line 25 & 26.</span><br /><br />Now that the code is completed, to call it we use this link:<br /><br />http://blogger-beta-from-ground-up.blogspot.com/search/label/?max-results=999<br /><br />That was all I did for the posts to show. My next step for this little hack project is to look for all the unique labels contained in the posts, then have a for-loop going through all the found labels and prints all all the posts that match it. Because of this, if you have multiple labels for a particular post, it will show up many times, one for each label. That is acceptable, I think. I personally only assign one label per post right now in my main blog, but in the future, if I find a good benefit, I won't hesistate to add more labels.<br /><br />Wow! I finally did it! I'm at the end of my explanations! <br /><br />Have a wonderful day and see you next time, when I present you the completed "Site map" hack.<br /><br />Hoctro (9/30/2006)<br />Blog: http://hoctro.blogspot.com/<br /></span>Hoc Tro Viethttp://www.blogger.com/profile/08909759668315931000noreply@blogger.com