tag:blogger.com,1999:blog-60838448346841259562024-03-12T23:14:47.718-07:00Testing Nhat Ky Yeu NuocUnknownnoreply@blogger.comBlogger9125tag:blogger.com,1999:blog-6083844834684125956.post-61234213039235270242010-07-04T09:00:00.000-07:002010-07-04T09:02:34.374-07:00Blogger Help - How to add related posts below every posthttp://bloggerstop.net/2008/10/blogger-help-how-to-add-related-posts.html
<br />To add Related posts/Similar posts widget below every post on your blog, follow these simple steps:
<br />
<br />First of all download this file:
<br />relatedPosts_ForBlogger2.js
<br />
<br /><a href="http://www.ziddu.com/download/3884721/RelatedPosts_ForBlogger.zip.html" target="_blank">Zipped File</a>
<br />
<br />And upload the file (relatedPosts_ForBlogger2.js) to <a href="http://www.mdn.fm/register/?r=38" target="_blank">MDN.fm</a> or SigMirror.com to get a DIRECT LINK to that file.
<br />
<br />1. Go to Blogger.com
<br />2. Now go to "Layout", then to "Edit HTML" section
<br />3. Back up your <span class="IL_AD" id="IL_AD2">present</span> template, by "Downloading it"
<br />4. Now click on "<b>Expand widget templates</b>"
<br />5. Find this code: </head>
<br />
<br />Now, just before this code paste this
<br /><blockquote><!--RelatedPostsStarts-->
<br /><style>
<br />#related-posts {
<br />float : left;
<br />width : 540px;
<br />margin-top:20px;
<br />margin-left : 5px;
<br />margin-bottom:20px;
<br />font : 11px Verdana;
<br />margin-bottom:10px;
<br />}
<br />#related-posts .widget {
<br />list-style-type : none;
<br />margin : 5px 0 5px 0;
<br />padding : 0;
<br />}
<br />#related-posts .widget h2, #related-posts h2 {
<br />color : #940f04;
<br />font-size : 20px;
<br />font-weight : normal;
<br />margin : 5px 7px 0;
<br />padding : 0 0 5px;
<br />}
<br />#related-posts a {
<br />color : #054474;
<br />font-size : 11px;
<br />text-decoration : none;
<br />}
<br />#related-posts a:hover {
<br />color : #054474;
<br />text-decoration : none;
<br />}
<br />#related-posts ul {
<br />border : medium none;
<br />margin : 10px;
<br />padding : 0;
<br />}
<br />#related-posts ul li {
<br />display : block;
<br />background : url("http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif") no-repeat 0 0;
<br />margin : 0;
<br />padding-top : 0;
<br />padding-right : 0;
<br />padding-bottom : 1px;
<br />padding-left : 16px;
<br />margin-bottom : 5px;
<br />line-height : 2em;
<br />border-bottom:1px dotted #cccccc;
<br />}
<br />
<br /></style>
<br /><script src="'<span" style="color: red;">http://sigmirror.com/............/relatedPosts_ForBlogger2.js</span>' type='text/javascript'/><!--RelatedPostsStops--></blockquote><b>Replace the link in RED with the DIRECT LINK, you got in the previous step.</b>
<br />
<br />6. Now search for this code line:
<br /><blockquote><data:post.body/></blockquote>And after this, paste these code lines
<br /><blockquote><!--RELATED-POSTS-STARTS--><b:if cond="'data:blog.pageType">
<br /><div id="'related-posts'">
<br /><span style="font-family:'Arial';font-size:'3';"><b>Related Posts: </b></span><span style="color:'#FFFFFF';"><b:loop values="'data:post.labels'" var="'label'"><data:label.name/><b:if cond="'data:label.isLast">,</b:if><b:if cond="'data:blog.pageType">
<br /><script src="'"<span" style="color: red;">/feeds/posts/default/-/</span>" + data:label.name + "?alt=json-in-script&callback=related_results_labels&<span style="color: red;">max-results=5</span>"' type='text/javascript'/></b:if></b:loop> </span>
<br /><script type="'text/javascript'"> removeRelatedDuplicates(); printRelatedLabels();
<br /></script></div></b:if><!--RELATED-POSTS-STOPS--></blockquote>To change the number of similar/related posts to be displayed, change the code <b>max-results=xx</b>
<br />Finally save your template, and you will see related posts after all your posts(Remember to add labels after your posts, during publishing them)Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6083844834684125956.post-55544296379084080142010-07-02T17:30:00.001-07:002010-07-02T17:31:40.476-07:00Add Page Number (with First and Last Page) Navigation Link for Blogger (Blogspot) with Gadget Element and Manual HackBlogger free <a id="KonaLink8" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/#"><span style="position: static;font-size:13px;color:#b00000;" ><span class="kLink" style="color:#b00000;">blog</span></span></a> publishing platform uses a pretty limited navigation features that only display “Older Posts” or “Newer Posts” link to let readers navigate and browse to other pages on homepage (index), archive, category and label pages. Unlike WordPress blog that supports plugin to customize the page navigation link to numbered pages listing to make it more user friendly, Blogger, whether hosted on blogspot.com or custom <a id="KonaLink11" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/#"><span style="position: static;font-size:13px;color:#b00000;" ><span class="kLink" style="color:#b00000;">domain</span></span></a> does not have such flexibility.
<br /><p>
<br />However, it’s still possible to change and replace the typical classic “Older Posts” and “Newer Posts” navigation link on Blogger blog to numbered pages navigation, as illustrated in figure below by using a CSS and JavaScript hack wrote by Mohamed Rias.</p> <p><img class="alignnone size-medium wp-image-12458" title="blogger-page-navigation" src="http://www.mydigitallife.info/wp-content/uploads/2008/10/blogger-page-navigation.jpg" alt="Numbered Page Navigation for Blogger" width="400" height="51" /></p> <p>As shown in image above, a navigation link consists of page numbers, first page, last page, next page and previous page (when applicable) is display on Blogger blog instead of the usual “Older Items” and “Newer Items” <a id="KonaLink2" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/#"><span style="position: static;font-size:13px;color:#b00000;" ><span class="kLink" style="color:#b00000;">text </span><span class="kLink" style="color:#b00000;">links</span></span></a>.</p> <p>To add the “new” navigation link with page number to Blogger blog, simply add in a new Page Element Gadget in the Blogger. To do so, follow the guide below:</p> <ol><li>Login to <a href="http://www.blogger.com/home">Blogger</a> account <strong>Dashboard</strong>.</li><li>Click on the <strong>Layout</strong> link for the blog that you want to modify (if you’re viewing the blog and logged in to Blogger or Google Account, just click on <strong>Customize</strong> on the Next Blog <a id="KonaLink4" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/#"><span style="position: static;font-size:13px;color:#b00000;" ><span class="kLink" style="color:#b00000;">toolbar</span></span></a>.</li><li>Go to <strong>Page Element</strong> tab (by default).</li><li>Click on <strong>Add a Gadget</strong> anywhere in the layout.</li><li>In the Add a Gadget window, select <strong>HTML/JavaScript</strong>.</li><li>Add the following code into the <strong>Content</strong> text field. Title field can be left blank, or just type in any description such as “Page Navigation” to differentiate it from the rest of widgets.
<br /><blockquote><p> <style><br />.showpageArea {<br />padding: 0 2px;margin-top:10px;margin-bottom:10px;<br />}</p> <p>.showpageArea a {<br />border: 1px solid #505050;<br />color: #000000;font-weight:normal;<br />padding: 3px 6px !important;<br />padding: 1px 4px ;margin:0px 4px;<br />text-decoration: none;<br />}</p> <p>.showpageArea a:hover {<br />font-size:11px;<br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br />}</p> <p>.showpageNum a {<br />border: 1px solid #505050;<br />color: #000000;font-weight:normal;<br />padding: 3px 6px !important;<br />padding: 1px 4px ;margin:0px 4px;<br />text-decoration: none;<br />}</p> <p>.showpageNum a:hover {<br />font-size:11px;<br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;</p> <p>}<br />.showpagePoint {<br />font-size:11px;<br />padding: 2px 4px 2px 4px;<br />margin: 2px;<br />font-weight: bold;<br />border: 1px solid #333;<br />color: #fff;<br />background-color: #000000;<br />}</p> <p>.showpage a:hover {<br />font-size:11px;<br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br />}</p> <p>.showpageNum a:link,.showpage a:link {<br />font-size:11px;<br />padding: 2px 4px 2px 4px;<br />margin: 2px;<br />text-decoration: none;<br />border: 1px solid #0066cc;<br />color: #0066cc;<br />background-color: #FFFFFF;}</p> <p>.showpageNum a:hover {<br />font-size:11px;<br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br />}<br /></style></p> <p><script type="”text/javascript”"></p> <p>function showpageCount(json) {<br />var thisUrl = location.href;<br />var htmlMap = new Array();<br />var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;<br />var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1;<br />var isPage = thisUrl.indexOf(“/search?updated”)!=-1;<br />var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(“/search/label/”)+14,thisUrl.length) : “”;<br />thisLable = thisLable.indexOf(“?”)!=-1 ? thisLable.substr(0,thisLable.indexOf(“?”)) : thisLable;<br />var thisNum = 1;<br />var postNum=1;<br />var itemCount = 0;<br />var fFlag = 0;<br />var eFlag = 0;<br />var html= ”;<br />var upPageHtml =”;<br />var downPageHtml =”;</p> <p>var pageCount=5;<br />var displayPageNum=3;<br />var firstPageWord = ‘First’;<br />var endPageWord = ‘Last’;<br />var upPageWord =’Previous’;<br />var downPageWord =’Next’;</p> <p>var labelHtml = ‘<span class="”showpageNum”"><a href="”/search/label/’+thisLable+’?&max-results=">’;</p> <p>for(var i=0, post; post = json.feed.entry[i]; i++) {<br />var timestamp = post.published.$t.substr(0,10);<br />var title = post.title.$t;<br />if(isLablePage){<br />if(title!=”){<br />if(post.category){<br />for(var c=0, post_category; post_category = post.category[c]; c++) {<br />if(encodeURIComponent(post_category.term)==thisLable){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br />thisNum = postNum;<br />}</p> <p>postNum++;<br />htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;<br />}<br />}<br />}<br />}//end if(post.category){</p> <p>itemCount++;<br />}</p> <p>}else{<br />if(title!=”){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br />thisNum = postNum;<br />}</p> <p>if(title!=”) postNum++;<br />htmlMap[htmlMap.length] = ‘/search?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;<br />}<br />}<br />itemCount++;<br />}<br />}</p> <p>for(var p =0;p<>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +’</a></span>’;<br />}else{<br />upPageHtml = ‘<span class="”showpage”"><a href="”/”">’+ upPageWord +’</a></span>’;<br />}<br />}else{<br />upPageHtml = ‘<span class="”showpage”"><a href="”‘+htmlMap[p]+’”">’+ upPageWord +’</a></span>’;<br />}</p> <p>fFlag++;<br />}</p> <p>if(p==(thisNum-1)){<br />html += ‘ <span class="”showpagePoint”"><u>’+thisNum+’</u></span>’;<br />}else{<br />if(p==0){<br />if(isLablePage){<br />html = labelHtml+’1</a></span>’;<br />}else{<br />html += ‘<span class="”showpageNum”"><a href="”/”">1</a></span>’;<br />}<br />}else{<br />html += ‘<span class="”showpageNum”"><a href="”‘+htmlMap[p]+’”">’+ (p+1) +’ </a></span>’;<br />}<br />}</p> <p>if(eFlag ==0 && p == thisNum){<br />downPageHtml = ‘<span class="”showpage”"> <a href="”‘+htmlMap[p]+’”">’+ downPageWord +’</a></span>’;<br />eFlag++;<br />}<br />}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p<> <p>if(thisNum>1){<br />if(!isLablePage){<br />html = ‘<span class="”showpage”"><a href="”/”">’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;<br />}else{<br />html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;<br />}<br />}</p> <p>html = ‘<div class="”showpageArea”"><span style="”padding:;font-size:11px;" class="”showpage”">Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;</p> <p>if(thisNum<(postNum-1)){ html += downPageHtml; html += ‘<span class="”showpage”"><a href="”‘+htmlMap[htmlMap.length-1]+’”"> ‘+endPageWord+’</a></span>’;<br />}</p> <p>if(postNum==1) postNum++;<br />html += ‘</div>’;</p> <p>if(isPage || isFirstPage || isLablePage){<br />var pageArea = document.getElementsByName(“pageArea”);<br />var blogPager = document.getElementById(“blog-pager”);</p> <p>if(postNum <= 2){ html =”; }</p> <p>for(var p =0;p< innerhtml =" html;"> <p>if(pageArea&&pageArea.length>0){<br />html =”;<br />}</p> <p>if(blogPager){<br />blogPager.innerHTML = html;<br />}<br />}</p> <p>}<br /></script></p> <p><script src="%E2%80%9D/feeds/posts/summary?alt=" callback="showpageCount&max-results=" type="”text/javascript”"></script> </p></blockquote> </li><li>Click <strong>Save</strong> button.</li><li>Drag and drop the newly added HTML/JavaScript gadget to <strong>directly right below the Blog Posts</strong> element.<img class="alignnone size-medium wp-image-12473" title="page-navigation-gadget" src="http://www.mydigitallife.info/wp-content/uploads/2008/10/page-navigation-gadget.jpg" alt="Location of Page Navigation Gadget" width="428" /></li><li>Click on Save button to make the change effective.</li></ol> <p>For user who don’t want to use the Page Element widget or gadget, it’s possible to manually editing the <a id="KonaLink3" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/#"><span style="position: static;font-size:13px;color:#b00000;" ><span class="kLink" style="color:#b00000;">HTML </span><span class="kLink" style="color:#b00000;">file</span></span></a>, although it’s more difficult to do and should only be tried by blogger with technical expertise.</p> <ol><li>Login to <a href="http://www.blogger.com/home">Blogger</a> account <strong>Dashboard</strong>.</li><li>Click on the <strong>Layout</strong> link for the blog that you want to modify (if you’re viewing the blog and logged in to Blogger or Google Account, just click on <strong>Customize</strong> on the Next Blog toolbar.</li><li>Go to <strong>Edit HTML</strong> tab (there is no need to expand widget templates).</li><li>Search for the following line:<strong><code>]]></code></strong></li><li>Copy the following <a id="KonaLink5" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/#"><span style="position: static;font-size:13px;color:#b00000;" ><span class="kLink" style="color: blue ! important; border-bottom: 1px solid blue;color:transparent;" >CSS </span><span class="kLink" style="color: blue ! important; border-bottom: 1px solid blue;color:transparent;" >code</span></span><span style="position: relative;" class="preLoadWrap" id="preLoadWrap5"><div style="position: absolute; z-index: 2147482647; top: -32px; left: -18px; display: none;" id="preLoadLayer5"><img style="border: medium none; width: 22px; height: 22px;" src="http://kona.kontera.com/javascript/lib/imgs/grey_loader.gif" class="preloadImg" /></div></span></a> and paste or append the code above the line: <p><code>.showpageArea {
<br />padding: 0 2px;margin-bottom:10px;margin-top:10px;
<br />}</code></p> <p><code>.showpageArea a {
<br />border: 1px solid #505050;
<br />color: #000000;font-weight:normal;
<br />padding: 3px 6px !important;
<br />padding: 1px 4px ;margin:0px 4px;
<br />text-decoration: none;
<br />}</code></p> <p><code>.showpageArea a:hover {
<br />font-size:11px;
<br />border: 1px solid #333;
<br />color: #000000;
<br />background-color: #FFFFFF;
<br />}</code></p> <p><code>.showpageNum a {
<br />border: 1px solid #505050;
<br />color: #000000;font-weight:normal;
<br />padding: 3px 6px !important;
<br />padding: 1px 4px ;margin:0px 4px;
<br />text-decoration: none;
<br />}</code></p> <p><code>.showpageNum a:hover {
<br />font-size:11px;
<br />border: 1px solid #333;
<br />color: #000000;
<br />background-color: #FFFFFF;
<br />}</code></p> <p><code>.showpagePoint {
<br />font-size:11px;
<br />padding: 2px 4px 2px 4px;
<br />margin: 2px;
<br />font-weight: bold;
<br />border: 1px solid #333;
<br />color: #fff;
<br />background-color: #000000;
<br />}</code></p> <p><code>.showpage a:hover {
<br />font-size:11px;
<br />border: 1px solid #333;
<br />color: #000000;
<br />background-color: #FFFFFF;
<br />}</code></p> <p><code>.showpageNum a:link,.showpage a:link {
<br />font-size:11px;
<br />padding: 2px 4px 2px 4px;
<br />margin: 2px;
<br />text-decoration: none;
<br />border: 1px solid #0066cc;
<br />color: #0066cc;
<br />background-color: #FFFFFF;
<br />}</code></p> <p><code>.showpageNum a:hover {
<br />font-size:11px;
<br />border: 1px solid #333;
<br />color: #000000;
<br />background-color: #FFFFFF;
<br />}</code></p> </li><li>Next, search for the following line of code in the template’s HTML code: <p><strong><code><b:section class="'main'" id="'main'" showaddelement="'no'">
<br /><b:widget id="'Blog1'" locked="'true'" title="'Blog" type="'Blog'/">
<br /></b:widget></b:section></code></strong></p> <p>Note: The ‘no’ after “showaddelement” can be ‘yes’ for some bloggers. </p></li><li>Add and append the following <a id="KonaLink6" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/#"><span style="position: static;font-size:13px;color:#b00000;" ><span class="kLink" style="color: blue ! important; border-bottom: 1px solid blue;color:transparent;" >JavaScript </span><span class="kLink" style="color: blue ! important; border-bottom: 1px solid blue;color:transparent;" >code</span></span><span style="position: relative;" class="preLoadWrap" id="preLoadWrap6"><div style="position: absolute; z-index: 2147482647; top: -32px; left: -18px; display: none;" id="preLoadLayer6"><img style="border: medium none; width: 22px; height: 22px;" src="http://kona.kontera.com/javascript/lib/imgs/grey_loader.gif" class="preloadImg" /></div></span></a> right after the <strong></strong> line:
<br /><blockquote><p><script type="text/javascript"></p> <p>function showpageCount(json) {
<br />var thisUrl = location.href;
<br />var htmlMap = new Array();
<br />var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
<br />var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
<br />var isPage = thisUrl.indexOf("/search?updated")!=-1;
<br />var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
<br />thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
<br />var thisNum = 1;
<br />var postNum=1;
<br />var itemCount = 0;
<br />var fFlag = 0;
<br />var eFlag = 0;
<br />var html= '';
<br />var upPageHtml ='';
<br />var downPageHtml ='';</p> <p>var pageCount=5;
<br />var displayPageNum=3;
<br />var firstPageWord = 'First';
<br />var endPageWord = 'Last';
<br />var upPageWord ='Previous';
<br />var downPageWord ='Next';</p> <p>var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';</p> <p>for(var i=0, post; post = json.feed.entry[i]; i++) {
<br />var timestamp = post.published.$t.substr(0,10);
<br />var title = post.title.$t;
<br />if(isLablePage){
<br />if(title!=''){
<br />if(post.category){
<br />for(var c=0, post_category; post_category = post.category[c]; c++) {
<br />if(encodeURIComponent(post_category.term)==thisLable){
<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
<br />if(thisUrl.indexOf(timestamp)!=-1 ){
<br />thisNum = postNum;
<br />}</p> <p>postNum++;
<br />htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
<br />}
<br />}
<br />}
<br />}//end if(post.category){</p> <p>itemCount++;
<br />}</p> <p>}else{
<br />if(title!=''){
<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
<br />if(thisUrl.indexOf(timestamp)!=-1 ){
<br />thisNum = postNum;
<br />}</p> <p>if(title!='') postNum++;
<br />htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
<br />}
<br />}
<br />itemCount++;
<br />}
<br />}</p> <p>for(var p =0;p< htmlMap.length;p++){
<br />if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
<br />if(fFlag ==0 && p == thisNum-2){
<br />if(thisNum==2){
<br />if(isLablePage){
<br />upPageHtml = labelHtml + upPageWord +'</a></span>';
<br />}else{
<br />upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
<br />}
<br />}else{
<br />upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
<br />}</p> <p>fFlag++;
<br />}</p> <p>if(p==(thisNum-1)){
<br />html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
<br />}else{
<br />if(p==0){
<br />if(isLablePage){
<br />html = labelHtml+'1</a></span>';
<br />}else{
<br />html += '<span class="showpageNum"><a href="/">1</a></span>';
<br />}
<br />}else{
<br />html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
<br />}
<br />}</p> <p>if(eFlag ==0 && p == thisNum){
<br />downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
<br />eFlag++;
<br />}
<br />}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
<br />}//end for(var p =0;p< htmlMap.length;p++){</p> <p>if(thisNum>1){
<br />if(!isLablePage){
<br />html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
<br />}else{
<br />html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
<br />}
<br />}</p> <p>html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;</p> <p>if(thisNum<(postNum-1)){
<br />html += downPageHtml;
<br />html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
<br />}</p> <p>if(postNum==1) postNum++;
<br />html += '</div>';</p> <p>if(isPage || isFirstPage || isLablePage){
<br />var pageArea = document.getElementsByName("pageArea");
<br />var blogPager = document.getElementById("blog-pager");</p> <p>if(postNum <= 2){
<br />html ='';
<br />}</p> <p>for(var p =0;p< pageArea.length;p++){
<br />pageArea[p].innerHTML = html;
<br />}</p> <p>if(pageArea&&pageArea.length>0){
<br />html ='';
<br />}</p> <p>if(blogPager){
<br />blogPager.innerHTML = html;
<br />}
<br />}</p> <p>}
<br /></script></p> <p><script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script></p></blockquote> </li><li>Click on <strong>Preview</strong> button to ensure that no code error been found. No effect on the navigation hack can be seen though.</li><li>Click on <strong>Save Template</strong> to save the change.</li></ol> <p><strong>Customization and Modification</strong></p> <ol><li>For user who is not using blogspot.com domain (using self-hosted <a id="KonaLink7" target="undefined" class="kLink" style="text-decoration: underline ! important; position: static;" href="http://www.mydigitallife.info/2008/10/19/add-page-number-with-first-and-last-page-navigation-link-for-blogger-blogspot-with-gadget-element-and-manual-hack/#"><span style="position: static;font-size:13px;color:#b00000;" ><span class="kLink" style="color: blue ! important; border-bottom: 1px solid blue;color:transparent;" >domain </span><span class="kLink" style="color: blue ! important; border-bottom: 1px solid blue;color:transparent;" >name</span></span></a>), modify the <strong>.blogspot.com</strong> and <strong>14</strong> (13 characters of domain name + 1) in the line of <strong>var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";</strong> accordingly.</li><li>The value in the line of <strong>var pageCount =5;</strong> determines the number of posts to be shown on each page.</li><li>The value in the line of <strong>var displayPageNum = 3;</strong> defines the number of page links in the navigation bar to be displayed (e.g. 1 – 2 – 3).</li><li>User who knows CSS and Java Script can customize the code to their likings.</li></ol> <p><a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-menu-widget-for-blogger.html" rel="nofollow">Source 1</a> and <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html" rel="nofollow">Source 2</a></p>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-6083844834684125956.post-86263909172703863212010-07-02T16:51:00.000-07:002010-07-02T16:52:18.422-07:00Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.Hi dear friend, <p>I promised you in a previous tutorial, here ” <a href="http://www.allblogtools.com/uncategorized/surprise-blogger-now-officially-supports-read-more-links/">Blogger Now officially Supports “Read more” links.</a> ” that i’ll add a tutorial about customizing your read more links in blogspot.</p> <p>So you have <span class="IL_AD" id="IL_AD7">to check</span> out the previous tutorial if you are not familiar with the new blogger jump breaks <span class="IL_AD" id="IL_AD10">addition</span>.</p> <p>Now is the time for this tutorial,</p> <p>after <span class="IL_AD" id="IL_AD9">reading</span> this tutorial you’ll be able to <span class="IL_AD" id="IL_AD8">Customize</span> you read more links in those ways:</p> <ul><li class="single">Change the text ” read more ” to another words.</li><li class="single">Add An Image / Button To Your “Read More / Jump Breaks ” In Blogger Links Instead Of Plain Text</li><li class="single">choose your read more link / button to be <span class="IL_AD" id="IL_AD1">displayed</span> on left side, right side or center it.</li></ul> <p>so lets start, </p> <pre class="war"> Please <span class="IL_AD" id="IL_AD4">download</span> a copy of your <span class="IL_AD" id="IL_AD2">template</span> before <span class="IL_AD" id="IL_AD3">applying</span> any changes. </pre> <div class="heads">First Step, You Must Do This Step</div> <p>this code should be included in your blogger template,</p> <pre><b:if cond="'data:post.hasJumpLink'">
<br /><div class="IL_AD" id="IL_AD5">class='jump-link'>
<br /><a href="http://www.blogger.com/%27data:post.url"><strong>Read More</strong> </a>
<br /></div>
<br /></b:if>
<br /></pre> <p>i’ll tell you where to add it, but before you add it, make sure that it’s not already included in your template.
<br />Go to you blogger dashboard >> Layout >> Edit HTML and Check on <strong>Expand Widget Templates</strong> use your <span class="IL_AD" id="IL_AD6">internet</span> browser to search for the code,</p> <p><strong>if you found the code in your template,</strong> ok you have to skip this step
<br />but before you skip it,
<br />make sure that the third line in the code looks like this </p> <pre><a href="http://www.blogger.com/%27data:post.url"><strong>Read More</strong> </a></pre> <p>And not</p> <pre><a href="http://www.blogger.com/%27data:post.url"><strong><data:post.jumptext></data:post.jumptext></strong></a></pre> <p>if you found it like the second one, please replace it with the first one</p> <p><strong>if it’s not in your template </strong>you’ll have to add it, and i’ll tell you where you should add it.</p> <p>Go to you blogger dashboard >> Layout >> Edit HTML and Check on <strong>Expand Widget Templates</strong> use your internet browser to search for this code,</p> <pre><data:post.body></data:post.body></pre> <p>and just after it, add the next code, </p> <pre><b:if cond="'data:post.hasJumpLink'">
<br /><div class="'jump-link'">
<br /><a href="http://www.blogger.com/%27data:post.url"><strong>Read More</strong> </a>
<br /></div>
<br /></b:if>
<br /></pre> <p>Now we finished adding the require code for customizing this trick.</p> <div class="heads">Lets start customizing</div> <div class="heads">1.Change the text ” read more ” to another words.</div> <p>this is the easiest on ever,
<br />after applying the first step to your template, you should have this code added to your template :</p> <pre><b:if cond="'data:post.hasJumpLink'">
<br /><div class="'jump-link'">
<br /><a href="http://www.blogger.com/%27data:post.url"><span style="color: rgb(255, 0, 0);"><strong>Read More</strong></span></a>
<br /></div>
<br /></b:if>
<br /></pre> <p>This code will display your read more link in this format : <strong>Read More</strong></p> <p>and to change it to another word, simply, change the word <span style="color: rgb(255, 0, 0);"><strong>Read More</strong></span> in the code in your template to what ever you want, Example? Keep reading, continue reading, read the rest, and more.</p> <p>After changing it, click <strong>Save template</strong> and check out your blog.</p> <div class="heads">2.Add An Image / Button Instead Of Plain Text</div> <p>Ok, now again, after applying the first step to your template,
<br />you must have this code added to your template </p> <pre><b:if cond="'data:post.hasJumpLink'">
<br /><div class="'jump-link'">
<br /><a href="http://www.blogger.com/%27data:post.url"><span style="color: rgb(255, 0, 0);"><strong>Read More</strong></span></a>
<br /></div>
<br /></b:if>
<br /></pre> <p>This code will display your read more link in this format : <strong>Read More</strong></p> <p>and to change the text to image / button , we should replace the word <span style="color: rgb(255, 0, 0);"><strong>Read More</strong></span> in the code with the following </p> <pre><img src="http://www.blogger.com/%3Cspan%20color=" border="0" /><strong>Paste here the button Image URL</strong>"/></pre> <p>so you should have some thing like this </p> <pre><img src="http://www.blogger.com/%3Cspan%20color=" border="0" /><strong>http://www.allblogtools.com/image-url.jpg</strong>"/></pre> <p>After changing it, click <strong>Save template</strong> and check out your blog.</p> <p>And here is some good samples for read more buttons : </p> <p align="center"><img src="http://www.radiantresources.com/images/Objects/Button_ReadMore_Reflective.jpg" alt="Read More" border="0" />
<br />
<br /><img src="http://blackberry-soft.com/wp-content/themes/elegant-box/images/readmore.gif" alt="Read More" border="0" />
<br />
<br /><img src="http://www.ionthescene.com/images/readMore.png" alt="Read More" border="0" />
<br />
<br /><img src="http://www.rushpersonnelinc.com/images/but_moreinfo.gif" alt="Read More" border="0" />
<br />
<br /><img src="http://careerplanasia.com/images/readmore.jpg" alt="Read More" border="0" />
<br />
<br /><img src="http://www.babyshoe.com/v/vspfiles/assets/images/readmore.jpg" alt="Read More" border="0" />
<br /></p> <p>And you can find more buttons by searching in google for “read more button”.</p> <div class="heads">3. Control the read more link or button alignment, left, right Or center.</div> <p>lets back again for the first step, after applying the first step to your template,
<br />you must have this code added to your template after applying first step.</p> <pre><b:if cond="'data:post.hasJumpLink'">
<br /><div class="'jump-link'">
<br /><a href="http://www.blogger.com/%27data:post.url"><span style="color: rgb(255, 0, 0);"><strong>Read More</strong></span></a>
<br /></div>
<br /></b:if>
<br /></pre> <p>this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in blue color.</p> <pre><b:if cond="'data:post.hasJumpLink'"><div class="'jump-link'">
<br /><a href="http://www.blogger.com/%27data:post.url"><span style="color: rgb(0, 0, 204);"><strong></strong><p align=""></p></span><span style="color: rgb(0, 153, 255);"><strong><strong>xxxx</strong></strong></span><span style="color: rgb(0, 0, 204);"><strong><strong>"></strong></strong></span><span style="color: rgb(255, 0, 0);"><strong><strong>Read More</strong></strong></span><strong><strong><span style="color: rgb(0, 0, 204);"><p></p></span></strong></strong></a></div></b:if><strong>
<br /></strong></pre><strong> </strong><p><strong>and you can replace the <span style="color: rgb(0, 153, 255);"><strong>xxxx</strong></span> with <strong>Left</strong>, <strong>right</strong>, or <strong>center</strong>.</strong></p><strong> </strong><p><strong>any in this way you can control the position for your link or button.</strong></p><strong> </strong><p><strong>and here is some examples to help you </strong></p><strong> </strong><div class="heads"><strong>Example 1</strong></div><strong> </strong><pre><b:if cond="'data:post.hasJumpLink'"><strong>
<br /></strong><div class="'jump-link'"><strong>
<br /><a href="http://www.blogger.com/%27data:post.url"><span style="color: rgb(0, 0, 204);"><strong></strong><p align=""></p></span><span style="color: rgb(0, 153, 255);"><strong><strong>Left</strong></strong></span><span style="color: rgb(0, 0, 204);"><strong><strong>"></strong></strong></span><span style="color: rgb(255, 0, 0);"><strong><strong>Read More</strong></strong></span><strong><strong><span style="color: rgb(0, 0, 204);"><p></p></span></strong></strong></a><strong>
<br /></strong></strong></div><strong><strong>
<br /></strong></strong></b:if><strong><strong>
<br /></strong></strong></pre><strong><strong> </strong></strong><p><strong><strong><em>This will display read more in pain text aligned to left</em></strong></strong></p><strong><strong> </strong></strong><div class="heads"><strong><strong>Example 2</strong></strong></div><strong><strong> </strong></strong><pre><b:if cond="'data:post.hasJumpLink'"><strong><strong>
<br /></strong></strong><div class="'jump-link'"><strong><strong>
<br /><a href="http://www.blogger.com/%27data:post.url"><span style="color: rgb(0, 0, 204);"><strong></strong><p align=""></p></span><span style="color: rgb(0, 153, 255);"><strong><strong>right</strong></strong></span><span style="color: rgb(0, 0, 204);"><strong><strong>"></strong></strong></span><span style="color: rgb(255, 0, 0);"><strong><strong><img src="http://www.blogger.com/%3Cspan%20color=" border="0" /><strong>http://www.allblogtools.com/image-url.jpg</strong></strong></strong></span><strong><strong>"/></strong><strong><span style="color: rgb(0, 0, 204);"><p></p></span></strong></strong></a><strong>
<br /></strong></strong></strong></div><strong><strong><strong>
<br /></strong></strong></strong></b:if><strong><strong><strong>
<br /></strong></strong></strong></pre><strong><strong><strong> </strong></strong></strong><p><strong><strong><strong><em>This will display read more in image button aligned to right</em></strong></strong></strong></p><strong><strong><strong> </strong></strong></strong><p><strong><strong><strong>i wish this can help you, you comments are welcome, and please share it if you found it useful</strong></strong></strong></p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6083844834684125956.post-41067584378234768432010-07-02T16:27:00.001-07:002010-07-02T16:27:43.460-07:00Add a Post Divider (Separator) Between Blogger (Blogspot) Posts<p>One of the most important <span class="IL_AD" id="IL_AD2">factors</span> to give your visitors a good impression about your blog, is to make it easy to read,<br />And since i see many blogs, i noticed that one of the most annoying things is that there is no separator or divider between blogger posts, so today we’ll lean how to add a Separator between blogspot posts easily. And here is <a href="http://max---111.blogspot.com/">a demo.</a></p> <div class="heads">Step 1</div> <p>Log into your blogger <span class="IL_AD" id="IL_AD3">account</span>, navigate to , <span class="IL_AD" id="IL_AD1">Dashboard</span> >> Layout >> Edit html, and find the following <span class="IL_AD" id="IL_AD5">code</span> </p> <pre>.post</pre> <p>this is the cs part that controls your post layout and style, it must contains few css properties like the following. </p> <pre>.post <span style="color:#ff0000;"><strong>{</strong></span><br />margin: 0 0 40px 0;<br />width: 90%<br /><strong><span style="color:#ff0000;">}</span></strong></pre> <p>Now we want to add the separator css properties between the opening and closing tags, <strong><span style="color:#ff0000;">{</span></strong> and <strong><span style="color:#ff0000;">}</span></strong></p> <p>Here is the separator css properties :</p> <pre>background: url(<span style="color:#ff0000;"><strong>Separator-Image-Url</strong></span>);<br />background-repeat: no-repeat;<br />background-position: bottom center;<br />margin:.5em 0 1.5em;<br />padding-bottom:<strong><span style="color:#0000ff;">2.5</span></strong>em;</pre> <p>And here is what you need to change in above code to customize it to your blog.<br /><span style="color:#ff0000;"><strong>Separator-Image-Url</strong></span><br />Change it to the separator image url, </p> <p><strong><span style="color:#0000ff;">2.5</span></strong><br />If you found that the separator displayed behind part of your post latest line, increase this number, for example to <strong><span style="color:#0000ff;">3.5</span></strong> Or <strong><span style="color:#0000ff;">4.5</span></strong>.</p> <p>Now your final code should looks Like The following one.</p> <pre>.post<span style="color:#ff0000;"><strong>{<br /></strong></span>margin: 0 0 40px 0;<br />width: 90%;<br />background: url(<span style="color:#ff0000;"><strong>http://www.imagehost.com/separator.jpg</strong></span>);<br />background-repeat: no-repeat;<br />background-position: bottom center;<br />margin:.5em 0 1.5em;<br />padding-bottom:<strong>2.5</strong>em;<br /><span style="color:#ff0000;"><strong>}</strong></span></pre> <div class="heads">Free Separator Images</div> <p>Now Here are some free Posts separators to use in your blog, just copy the image url and paste it in to it’s place in above code. </p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6083844834684125956.post-80347965317518220922010-06-21T01:20:00.000-07:002010-06-21T01:20:01.390-07:00Video - Diệt Thù Trên Hoàng-Trường Sa<object style="background-image:url(http://i4.ytimg.com/vi/3uj7cfFvHgU/hqdefault.jpg)" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/3uj7cfFvHgU&hl=en_US&fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/3uj7cfFvHgU&hl=en_US&fs=1" width="425" height="344" allowScriptAccess="never" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash"></embed></object><br /><br />Nhat Ky Yeu Nuoc - Diệt Thù Trên Hoàng-Trường Sa<br />Tác Giả: Tâm Thơ, Ngô Nguyễn Trần<br />Hòa Âm: Nhạc sỹ Lê Huỳnh<br />Trình Bày: Đình Nguyên<br />Huỳnh Lợi<br />Thể Loại: Nhạc (Movie)<br />Mục: Hùng Ca<br />Sự Kiện<br />http://www.vietsuca.org/Movie.aspx?pa...Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6083844834684125956.post-34084651919547651382010-06-20T22:16:00.001-07:002010-06-20T22:17:39.437-07:00Page Views / Post Views Counter Widget For Blogger.<p>As a <span class="IL_AD" id="IL_AD2">blogger</span> for very long time, I’m sure that every blogger wants to know how many times his new post viewed.
<br />A lot of visitors contacted me about this widget and asked me if it’s possible to do it in blogger.
<br />So today i’ll show you how to do it in blogger,
<br />It’s very easy to do and there are 2 styles for this widget.</p> <p align="center"><img class="postimage" title="Page Views / Post Views Counter Widget For Blogger." src="http://allblogtools.com/imgup/1-2010/post-views-counter-blogger-.jpg" alt="Page Views / Post Views Counter Widget For Blogger." width="294px" height="125px" /></p> <div class="heads">How To Add this widget For blogger.</div> <p>This is very easy to do it two steps, step 1, choose your widget style,
<br />and <span class="IL_AD" id="IL_AD3">step 2</span>, pate it’s code in your blogger <span class="IL_AD" id="IL_AD4">template</span> code.</p> <div class="heads">Step 1. Choose the style And <span class="IL_AD" id="IL_AD1">get your</span> code.</div> <ul><li class="single"><strong>Style 1. ( With Icon ) </strong> code, </li></ul> <pre><b:if cond="'data:blog.pageType"><div align="'center'" style="'border:solid"><img height="'16'" src="'http://forums.bit-tech.net/images-light/misc/stats.gif'" width="'16'/" /> <a href="'http://www.allblogtools.com'"><b><span style="font-size:'2';"><script src="'http://nirav07.ulmb.com/counter.php'" type="'text/javascript'/"> Views</span></b></a></div></b:if></pre> <ul><li class="single"><strong>Style 2. ( No Icon ) </strong> code, </li></ul> <pre><b:if cond="'data:blog.pageType"><div align="'center'" style="'border:solid"><a href="'http://www.allblogtools.com'"><b><span style="font-size:'2';"><script src="'http://nirav07.ulmb.com/counter.php'" type="'text/javascript'/"> Views</span></b></a></div></b:if></pre> <p>Please copy your widget code and follow instructions in step 2.</p> <div class="heads">Step 2. Add the widget for your blogger blog.</div> <p>Now go to your blogger account then navigate to, Layout >> Edit html, And before doing any thing you must check <strong>Expand Widget Templates</strong> box.
<br /> And find the next Code</p> <pre><div class="'post-header-line-1'/"></pre> <p>And <strong>after </strong>it, paste your widget code <em>You can get the widget code from previous step</em></p> <p><strong>What, </strong>If you didn’t find the code above in your template, The try to find the following, </p> <pre><data:post.body/></pre> <p>And paste the widget code <strong>Before </strong>it.</p> <p>, after doing this, please click <strong style="border: 1px solid rgb(153, 51, 0); padding: 2px; margin: 2px; background-color: rgb(255, 119, 0); color: rgb(255, 255, 255);">Save Template </strong> and you are done. </p>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6083844834684125956.post-5590019903949593672010-06-20T14:50:00.001-07:002010-06-20T14:50:54.158-07:00Three Columns Minima Template<h3 class="post-title"> <a href="http://tips-for-new-bloggers.blogspot.com/2007/02/three-columns-blogger-template.html">Three Columns Minima Template</a> </h3> <p>The typical new Blogger Minima Template has only one sidebar. We can add a third column to the left, to have two sidebars. This maximizes the space, and allows greater flexibility in adding page elements to the sidebar.<br /><br />Note that this guide is for those who want to convert their Minima template into a three column template by adding another sidebar. In our <a href="http://tips-for-new-bloggers.blogspot.com/2007/05/three-columns-rounders-template.html">Rounders Template</a> article, we have explained why the Rounders, Scribe, No. 897 or other templates are different and how the background images should be changed in order to cater to the new layout. We shall try to create new test blogs under different templates and post the tutorials once we have converted them into three column templates.<br /><br />In the meantime, if you are using other templates, please refer to our articles and guides on:-<br />1. <a href="http://tips-for-new-bloggers.blogspot.com/2007/08/three-columns-denim-template.html">Three Columns Denim Template</a>;<br />2. <a href="http://tips-for-new-bloggers.blogspot.com/2007/08/three-columns-dots-template.html">Three Columns Dots Template</a>;<br />3. <a href="http://tips-for-new-bloggers.blogspot.com/2007/05/three-columns-rounders-template.html">Three Columns Rounders Template</a>;<br />4. <a href="http://tips-for-new-bloggers.blogspot.com/2007/07/three-columns-rounders-2-template.html">Three Columns Rounders 2 Template</a>;<br />5. <a href="http://tips-for-new-bloggers.blogspot.com/2007/07/three-columns-rounders-3-template.html">Three Columns Rounders 3 Template</a>;<br />6. <a href="http://tips-for-new-bloggers.blogspot.com/2007/07/three-columns-rounders-4-template.html">Three Columns Rounders 4 Template</a>;<br />7. <a href="http://tips-for-new-bloggers.blogspot.com/2007/08/three-columns-sand-dollar-template.html">Three Columns Sand Dollar Template</a>;<br />8. <a href="http://tips-for-new-bloggers.blogspot.com/2007/07/three-columns-scribe-template.html">Three Columns Scribe Template</a>;<br />9. <a href="http://tips-for-new-bloggers.blogspot.com/2007/10/three-columns-thisaway-template-i.html">Three Columns Thisaway Template (I)</a>;<br />10. <a href="http://tips-for-new-bloggers.blogspot.com/2007/10/three-columns-thisaway-template-ii.html">Three Columns Thisaway Template (II)</a>.<br /><br /></p><table style="color: rgb(255, 102, 0);" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"><span style="font-size: 85%;"><span style="color: rgb(255, 0, 0);">Note</span>: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.</span></div></th></tr></tbody></table><br /><br />Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRU6DoghIUV9pt1bOc1yhyphenhyphenTUb_pwBXKFQsQB-QVmXCBy5cfIWoZGbDxQSzgz6q8DKf2dBDVkKgrWqA6j1d1R_UI-s8KkO35fJqmSL_LcIR9wXeUWJ5bI920aELyAJYZlRMT3t4yc7If5s/s1600-h/backuptemplate+001n.jpg"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRU6DoghIUV9pt1bOc1yhyphenhyphenTUb_pwBXKFQsQB-QVmXCBy5cfIWoZGbDxQSzgz6q8DKf2dBDVkKgrWqA6j1d1R_UI-s8KkO35fJqmSL_LcIR9wXeUWJ5bI920aELyAJYZlRMT3t4yc7If5s/s400/backuptemplate+001n.jpg" alt="" id="BLOGGER_PHOTO_ID_5115879425905031138" border="0" /></a><br /><br />Scroll to the part where you see this:-<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left">#outer-wrapper {<br />width: 660px;<br />margin:0 auto;<br />padding:10px;<br />text-align:left;<br />font: $bodyfont;<br />}<br /><br />#main-wrapper {<br />width: 410px;<br />float: left;<br />word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />}<br /><br /><span style="color: rgb(255, 0, 0);">#sidebar-wrapper {</span><br /><span style="color: rgb(255, 0, 0);">width: 220px;</span><br /><span style="color: rgb(255, 0, 0);">float: right;</span><br /><span style="color: rgb(255, 0, 0);">word-wrap: break-word; /* fix for long text breaking sidebar float in IE */</span><br /><span style="color: rgb(255, 0, 0);">overflow: hidden; /* fix for long non-text content breaking IE sidebar float */</span><br /><span style="color: rgb(255, 0, 0);">}</span></div></th></tr></tbody></table><br /><br />The template defines 3 wrappers, namely:-<br /><br />#outer-wrapper – referring to the entire blog<br />#main-wrapper – referring to the main Blog Posts<br />#sidebar-wrapper – referring to the right sidebar.<br /><br />To add another sidebar, copy the part highlighted in <span style="font-weight: bold; color: rgb(255, 0, 0);">red</span> and paste it immediately after that, but rename the “<span style="color: rgb(255, 0, 0);">#sidebar-wrapper</span>” to “<span style="color: rgb(255, 0, 0);">#newsidebar-wrapper</span>”.<br /><br />Next, adjust the width settings of all the wrappers. For this example, I used what is commonly used by many people i.e., 750px for outer-wrapper, 400px for main-wrapper, and 150px for sidebar-wrapper. You can of course change these values, so long as the total widths of both sidebar-wrappers and the main-wrapper do not exceed the width of the outer-wrapper.<br /><br />Also, fix the left margin of the main wrapper but allow the newsidebar to float to the left, leaving the original sidebar on the right.<br /><br />Your template should now read something like this:-<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left">#outer-wrapper {<br />width: <span style="color: rgb(255, 0, 0);">750px</span>;<br />margin:0 auto;<br />padding:10px;<br />text-align:left;<br />font: $bodyfont;<br />}<br /><br />#main-wrapper {<br />width: <span style="color: rgb(255, 0, 0);">400px</span>;<br /><span style="color: rgb(255, 0, 0);"> margin-left: 25px;</span><br />float: left;<br />word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />}<br /><br />#sidebar-wrapper {<br />width: <span style="color: rgb(255, 0, 0);">150px</span>;<br />float: right;<br />word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />}<br /><br /><span style="color: rgb(255, 0, 0);">#newsidebar-wrapper {</span><br /><span style="color: rgb(255, 0, 0);"> width: 150px;</span><br /><span style="color: rgb(255, 0, 0);"> float: left;</span><br /><span style="color: rgb(255, 0, 0);"> word-wrap: break-word; /* fix for long text breaking sidebar float in IE */</span><br /><span style="color: rgb(255, 0, 0);"> overflow: hidden; /* fix for long non-text content breaking IE sidebar float */</span><br /><span style="color: rgb(255, 0, 0);">}</span></div></th></tr></tbody></table><br /><span style="font-weight: bold; color: rgb(255, 102, 0);">Update:</span><br /><br />We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines (shown in <span style="font-weight: bold; color: rgb(255, 0, 0);">red</span>):-<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left">/** Page structure tweaks for layout editor wireframe */<br />body#layout #header {<br />margin-left: 0px;<br />margin-right: 0px;<br />}<br /><br /><span style="color: rgb(255, 0, 0);">body#layout #outer-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #header-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #footer {</span><br /><span style="color: rgb(255, 0, 0);">width: 750px;</span><br /><span style="color: rgb(255, 0, 0);">padding: 0px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">body#layout #main-wrapper {</span><br /><span style="color: rgb(255, 0, 0);">width: 400px;</span><br /><span style="color: rgb(255, 0, 0);">margin-left: 20px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /><br /><span style="color: rgb(255, 0, 0);">body#layout #sidebar-wrapper,</span><br /><span style="color: rgb(255, 0, 0);">body#layout #newsidebar-wrapper {</span><br /><span style="color: rgb(255, 0, 0);">width: 150px;</span><br /><span style="color: rgb(255, 0, 0);">}</span><br /></div></th></tr></tbody></table><br /><br /><span style="font-weight: bold; color: rgb(51, 153, 153);">Blog Posts in the Center</span><br /><br />This sets the style sheet for the template. We will now need to add a section in the body of the template. Scroll to somewhere near the bottom of the script where you see this.<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"> <div id="'main-wrapper'"><br /><b:section class="'main'" id="'main'" showaddelement="'no'"><br /><b:widget id="'Blog1'" locked="'true'" title="'Blog" type="'Blog'/"><br /></b:section><br /></div><br /><br /><div id="'sidebar-wrapper'"><br /><b:section class="'sidebar'" id="'sidebar'" preferred="'yes'/"><br /></div><br /></div></th></tr></tbody></table><br /><br />Add the portion in <span style="font-weight: bold; color: rgb(255, 0, 0);">red</span> <span style="color: rgb(153, 51, 153);">above</span> the div id='main wrapper'. The segment should look something like this:-<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"><span style="color: rgb(255, 0, 0);"><div id="'newsidebar-wrapper'"></span><br /><span style="color: rgb(255, 0, 0);"><b:section class="'sidebar'" id="'newsidebar'" preferred="'yes'"></span><br /><span style="color: rgb(255, 0, 0);"><b:widget id="'NewProfile'" locked="'false'" title="'About" type="'Profile'/"></span><br /><span style="color: rgb(255, 0, 0);"></b:section></span><br /><span style="color: rgb(255, 0, 0);"></div></span><br /><br /><div id="'main-wrapper'"><br /><b:section class="'main'" id="'main'" showaddelement="'no'"><br /><b:widget id="'Blog1'" locked="'true'" title="'Blog" type="'Blog'/"><br /></b:section><br /></div><br /><br /><div id="'sidebar-wrapper'"><br /><b:section class="'sidebar'" id="'sidebar'" preferred="'yes'/"><br /></div><br /></div></th></tr></tbody></table><br /><br />The code will give you a newsidebar on the left, main post in the middle, and leave the current sidebar on the right, just like what you see in this Blog.<br /><br /><span style="font-weight: bold; color: rgb(51, 153, 153);">Blog Posts on the Left</span><br /><br /><span style="font-style: italic;">If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion in <span style="font-weight: bold; color: rgb(255, 0, 0);">red</span> </span><span style="color: rgb(153, 51, 153); font-style: italic;">below</span><span style="font-style: italic;"> the div id='main wrapper'. It will look like this:-</span><br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"><div id="'main-wrapper'"><br /><b:section class="'main'" id="'main'" showaddelement="'no'"><br /><b:widget id="'Blog1'" locked="'true'" title="'Blog" type="'Blog'/"><br /></b:section><br /></div><br /><br /><span style="color: rgb(255, 0, 0);"><div id="'newsidebar-wrapper'"></span><br /><span style="color: rgb(255, 0, 0);"><b:section class="'sidebar'" id="'newsidebar'" preferred="'yes'"></span><br /><span style="color: rgb(255, 0, 0);"><b:widget id="'NewProfile'" locked="'false'" title="'About" type="'Profile'/"></span><br /><span style="color: rgb(255, 0, 0);"></b:section></span><br /><span style="color: rgb(255, 0, 0);"></div></span><br /><br /><div id="'sidebar-wrapper'"><br /><b:section class="'sidebar'" id="'sidebar'" preferred="'yes'/"><br /></div><br /></div></th></tr></tbody></table><br /><br /><span style="font-weight: bold; color: rgb(51, 153, 153);">Change Width of Header and Footer</span><br /><br />One more thing. If you have a wider layout, you may also want to lengthen the width of your Header and Footer. Go to the part of your template that says this:-<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left">#header-wrapper {<br />width:<span style="color: rgb(255, 0, 0);">660</span>px;<br /></div></th></tr></tbody></table><br /><br />and<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left">#footer {<br />width:<span style="color: rgb(255, 0, 0);">660</span>px;<br /></div></th></tr></tbody></table><br /><br />You can change the number in <span style="font-weight: bold; color: rgb(255, 0, 0);">red</span>. In this example, I may want to widen it to the same width as that of the outer-wrapper. I will therefore change the above codes to this:-<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left">#header-wrapper {<br />width:<span style="color: rgb(255, 0, 0);">750</span>px;<br /></div></th></tr></tbody></table><br /><br />and<br /><br /><table title="Three Columns Blogger Template" width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left">#footer {<br />width:<span style="color: rgb(255, 0, 0);">750</span>px;<br /></div></th></tr></tbody></table><br /><br />You may click “Preview” to see the new layout, and if you are happy with what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. You have now three columns in your layout!<br /><br /><span style="font-weight: bold; color: rgb(51, 153, 153);">Align Header Title and Description</span><br /><br /><span style="font-weight: bold; color: rgb(255, 102, 0);">Update</span><span style="color: rgb(255, 102, 0);">: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at</span> <a href="http://tips-for-new-bloggers.blogspot.com/2007/08/header-image-and-title-alignment-i.html">Header Image and Title Alignment (I)</a>.<br /><br /><span style="font-style: italic;">Note:</span><br /><br />If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6083844834684125956.post-12135308434718567012010-06-20T14:46:00.000-07:002010-06-20T14:47:09.485-07:00Add Favicon icon to Blogger URL<h3 class="post-title"> <a href="http://tips-for-new-bloggers.blogspot.com/2007/02/adding-favicon-icon-to-blogger-url.html">Add Favicon icon to Blogger URL</a> </h3> <p>Have you wondered how these little icons appear next to the web addresses, like the one you see above? When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”.
<br />
<br />You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.
<br />
<br />As for myself, I went to <a href="http://www.download.com/" target="_blank" rel="nofollow">Download.com</a> site and downloaded a very small program called <span style="color: rgb(153, 51, 153); font-weight: bold;">Imagicon</span> which can transform images into .ico format. I created an image using Photoshop. You can use any image or pictures if you do not wish to create one. Next, run the program. It is rather simple to use. While you can create icons in 2 sizes – 16x16 and 32x32 – I would think a 16x16 icon is preferable since it is readable in most older browsers.
<br />
<br />If you do not wish to download any software, you may also try creating an icon online. Just enter the keywords “online icon generator” into your Google search bar, and you should be able to find several programs that you can try.
<br /></p><form action="http://www.google.com/custom" target="google_window" method="get"><table bgcolor="#ffffff"><tbody><tr><td valign="top" align="left" height="32" nowrap="nowrap"><label for="sbi" style="display: none;">Enter your search terms</label>
<br /><input maxlength="255" id="sbi" value="" name="q" size="30" type="text"><label for="sbb" style="display: none;">Submit search form</label><input id="sbb" value="Google" name="sa" type="submit"><input value="pub-8152271566207153" name="client" type="hidden"><input value="1" name="forid" type="hidden">
<br /><input value="ISO-8859-1" name="ie" type="hidden"><input value="ISO-8859-1" name="oe" type="hidden"><input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"><input value="en" name="hl" type="hidden"></td></tr></tbody></table></form>
<br />Once you have created an icon, save it into your hard disk. The next step of attaching the icon is a little tricky. Ideally, all you need to do is to save it in the root directory of your blog site. Nevertheless, there is no way this can be done. For one, if you try to upload an icon image, Blogger will reject it. Two, any file that is uploaded will not go into the Blogger root directory.
<br />
<br />The only method to use will be to upload the icon into some web folder, and create a link. You can read about using free hosts like <a href="http://tips-for-new-bloggers.blogspot.com/2007/02/using-google-page-creator-and-google.html" target="_blank">Google Page Creator and Google Groups</a>. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on <a href="http://tips-for-new-bloggers.blogspot.com/2007/08/manage-blogger-image-storage-space.html" target="_blank">Manage Blogger Image Storage Space</a>. Check out those sites and choose one that is fast, reliable and allows uploading of .ico files.
<br />
<br />Once you have done that, take note of the URL of your icon. If you are using Google Page Creator, hovering your mouse over the link, you will see that the file is stored under a directory which looks like this <span style="color: rgb(255, 0, 0);">http://yourname.googlepages.com/iconname.ico</span>
<br />where “<span style="color: rgb(255, 0, 0);">yourname</span>” is your Gmail account name, and “<span style="color: rgb(255, 0, 0);">iconname</span>” is the file name. Copy this URL.
<br />
<br />Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-
<br />
<br /><table width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"><title><data:blog.pagetitle/></title>
<br /></div></th></tr></tbody></table>
<br />
<br /><span style="font-weight: bold; color: rgb(255, 102, 0);">Update:</span>
<br />
<br />Copy and insert the following code <span style="font-weight: bold; color: rgb(153, 51, 153);">below</span> the line:-
<br />
<br /><table width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"><link href="'<span" style="color: rgb(255, 0, 0);">URL of your icon file</span>' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<br /> </div></th></tr></tbody></table>
<br />
<br />Inserting this will also work but the former is preferred:-
<br />
<br /><table width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"><link href="'<span" style="color: rgb(255, 0, 0);">URL of your icon file</span>' rel='shortcut icon' type='image/x-icon'/>
<br /> </div></th></tr></tbody></table>
<br />
<br />Remember to type in the “<span style="color: rgb(255, 0, 0); font-weight: bold;">URL of your icon file</span>”.
<br />
<br />Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.
<br />
<br /><span style="font-weight: bold; color: rgb(51, 153, 153);">Other image types</span>
<br />
<br />The .ico image format has been used by many but you can also create an image under the .png or .gif format. Ensure that the size of the image is either 16x16 pixels or 32x32 pixels.
<br />
<br />If you have a PNG format image, the link to insert is:-
<br />
<br /><table width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"><link href="'<span" style="color: rgb(255, 0, 0);">URL of your icon file</span>' rel='shortcut icon' type='image/png'/>
<br /> </div></th></tr></tbody></table>
<br />
<br />If it is a GIF format image, the link is:-
<br />
<br /><table width="344" border="1" cellpadding="2"><tbody><tr><th scope="col" width="332"><div align="left"><link href="'<span" style="color: rgb(255, 0, 0);">URL of your icon file</span>' rel='shortcut icon' type='image/gif'/>
<br /> </div></th></tr></tbody></table>
<br />
<br /><span style="font-weight: bold; color: rgb(51, 153, 153);">External Domain</span>
<br />
<br />For those who have hosted sites in external domains, insert the link in the root directory as well. Otherwise, you can upload the file into the root directory and name it favicon.ico
<br />
<br />As an example, if your domain name is www.domain.com, the URL of the favicon will be www.domain.com/favicon.ico
<br />
<br />This method is not preferred but a number of browser versions are able to process the icon. Since we do not have external domains to try out this alternative, you may want to see if it works for you.
<br />
<br /><span style="font-weight: bold; color: rgb(51, 153, 153);">Compatibility</span>
<br />
<br />While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don't show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download <a href="http://tools.google.com/firefox/toolbar/bundle/?ai=BQvFJxY7GRoDAH5vmmQTk9oSLBNGe8heBg7LRAcWNtwEAEAEgsN6-BjgBUOHd82Rgv430BZgB6IcBmAHCnQygAbWVyP0DqgEKNDI0NjgwMDcwNLIBKGZhaXJ5LXRhbGVzLWZhYmxlcy1idXNpbmVzcy5ibG9nc3BvdC5jb23IAQLaATBodHRwOi8vZmFpcnktdGFsZXMtZmFibGVzLWJ1c2luZXNzLmJsb2dzcG90LmNvbS_gAQOAAgGoAwM&gclid=CJiEy4S0_o0CFRO-hgodfVIDPw" target="_blank">Mozilla Firefox</a> if you have not already done so.
<br />
<br />http://sites.google.com/site/nhatkyyeunuoc/Untitled.ico
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6083844834684125956.post-74398648824858583592010-06-20T13:41:00.000-07:002010-06-20T13:42:31.132-07:00TS Cù Huy Hà Vũ, từ khởi kiện Thủ tướng đến yêu cầu xóa bỏ điều 4 Hiến pháp<div id="attachment_6498" class="wp-caption alignleft" style="width: 280px;"><a href="http://haydanhthoigian.files.wordpress.com/2010/06/2_havuvoinongducmanh-_edited-3.jpg"><img class="size-medium wp-image-6498 " title="2_havuvoinongducmanh._edited-3" src="http://haydanhthoigian.files.wordpress.com/2010/06/2_havuvoinongducmanh-_edited-3.jpg?w=270&h=168" alt="" width="270" height="168" /></a><p class="wp-caption-text">Tổng bí thư Nông Ðức Mạnh (trái) và Tiến sĩ Cù Huy Hà Vũ</p></div> <p>Cách đây một năm, Tiến sĩ Luật Cù Huy Hà Vũ ở Hà Nội đã nạp đơn kiện đương kim Thủ tướng Nguyễn Tấn Dũng ra toà do đã xâm hại nghiêm trọng quyền lợi quốc gia khi cho phép Trung Quốc khai thác bauxite trên quy mô lớn tại Tây Nguyên mà không thông qua Quốc hội, tạo nên một sự kiện pháp lý – chính trị chưa từng có không chỉ ở Việt Nam mà trong lịch sử thế giới cộng sản. Kỷ niệm một năm vụ kiện, VOA có cuộc phỏng vấn người khởi kiện.</p> <p><strong><span id="more-6497"></span>VOA:</strong> Thưa Tiến sĩ Luật Cù Huy Hà Vũ, việc ông khởi kiện đương kim Thủ tướng Nguyễn Tấn Dũng đã được dư luận trong và ngoài Việt Nam đánh giá rất cao. Các nhà trí thức của trang mạng Bauxite Việt Nam thậm chí coi hành vi khởi kiện này của ông là một cuộc cách mạng khi gọi đó là “Xô Viết Nghệ – Tĩnh thời nay”. Ông nghĩ sao về sự đánh giá này?</p> <p><strong>Tiến sĩ Cù Huy Hà Vũ:</strong> Sự ủng hộ mạnh mẽ của dư luận rộng rãi mà trước hết của người dân Việt Nam đối với vụ kiện Thủ tướng Nguyễn Tấn Dũng mà tôi tiến hành ngày 11/6/2009 chắc chắn là một sự động viên vô cùng đặc biệt đối với cá nhân tôi, một người luôn tâm niệm Thượng tôn Tổ quốc Việt Nam, Hiến pháp và Pháp luật. Nhưng thành thật mà nói, tôi cảm thấy buồn nhiều hơn là vui.</p> <p><strong>VOA:</strong> Tại sao có chuyện buồn hơn vui khi được sự ủng hộ của nhiều người, thưa ông?</p> <p><strong>Tiến sĩ Cù Huy Hà Vũ:</strong> Bởi vì một hành vi pháp lý quá ư bình thường ở các nước khác lại trở thành một sự kiện ở Việt Nam. Thực vậy, ở các quốc gia thực sự dân chủ hay thực sự pháp quyền thì việc công dân kiện người đứng đầu Chính phủ hay nguyên thủ quốc gia, tất nhiên phải có lý do chính đáng, thậm chí là chuyện đáng khuyến khích vì nó thể hiện ở mức độ mẫu mực nguyên tắc “mọi công dân đều bình đẳng trước pháp luật”.</p> <p>Thế nhưng ở Việt Nam, mặc dầu nguyên tắc trên được Hiến pháp quy định rất rõ ràng ở Điều 52 và mặc dầu được cả một hệ thống các đạo luật, từ Luật Khiếu nại, tố cáo cho đến Pháp lệnh thủ tục giải quyết các vụ án hành chính và các Nghị định của Chính phủ hướng dẫn thi hành bảo hộ, việc công dân khởi kiện ra tòa quan chức chính quyền dù ở cấp thấp do có những hành vi hay quyết định hành chính trái pháp luật trên bình diện chung vẫn là bất khả thi hay vẫn là chuyện “con kiến kiện củ khoai” theo cách nói dân gian Việt Nam. Mà đã không kiện được thì người đi kiện cầm chắc khả năng bị đòn thù từ phía chính quyền.</p>Unknownnoreply@blogger.com0