tag:blogger.com,1999:blog-64187881829299811982024-03-28T16:30:07.500+07:00Trick and Tips Tutorial BloggerTrick and Tips Tutorial BloggerKendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.comBlogger37125tag:blogger.com,1999:blog-6418788182929981198.post-33788515856615955892008-11-02T00:23:00.000+07:002008-11-02T00:51:19.342+07:00Highlight Author Comment in Blogspot<div style="text-align: justify;">This trick is to give a<b> Highlight Author Comment </b>. This will make the blog's owner comments looks different from the visitors comments. It's very usefull and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.</div><span class="fullpost"><br /><br />1. Login to blogger, then choose <b>"Layout --> Edit HTML"</b>. Don't forget to backup your template first.<br />2. Check the <b>"Expand Widget Templates"</b> box.<br />3. Copy this script and put it before <b><span style="color: rgb(255, 0, 0);">]]></b:skin> </span></b> or copy to your CSS area.<br /><p class="alert">.comment-body-author {<br />background: #E6E6E6; <span style="color: rgb(255, 0, 0);"> /* Background color*/</span><br />color: #000; <span style="color: rgb(255, 0, 0);"> /* Text color*/</span><br />border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;<br />margin:0;<br />padding:0 0 0 20px; <span style="color: rgb(255, 0, 0);"> /* Posotion*/</span><br />}</p><br />4. Then find this code:<br /><p class="alert"><dl id='comments-block'><br /><b:loop values='data:post.comments' var='comment'><br /><dt class='comment-author' expr:id='"comment-" + data:comment.id'><br /><a expr:name='"comment-" + data:comment.id'/><br /><b:if cond='data:comment.authorUrl'><br /><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br /><b:else/><br /><data:comment.author/><br /></b:if><br />said...<br /></dt><br /><br /><span style="color: rgb(255, 0, 0);"> <b:if cond='data:comment.author == data:post.author'><br /><dd class='comment-body-author'><br /><p><data:comment.body/></p><br /></dd><br /><b:else/> </span><br /><br /><dd class='comment-body'><br /><b:if cond='data:comment.isDeleted'><br /><span class='deleted-comment'><data:comment.body/></span><br /><b:else/><br /><p><data:comment.body/></p><br /></b:if><br /></dd><br /><br /><span style="color: rgb(255, 0, 0);"></b:if></span><br /><br /><dd class='comment-footer'><br /><span class='comment-timestamp'><br /><a expr:href='"#comment-" + data:comment.id' title='comment permalink'><br /><data:comment.timestamp/><br /></a><br /><b:include data='comment' name='commentDeleteIcon'/><br /></span><br /></dd><br /></b:loop><br /></dl></p><br />5. The red color text is the code that you have to add to your script. The position must be right.<br />6. And then save your template.<br /><br />* You have to login into your blogger account before to give comments.<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com362tag:blogger.com,1999:blog-6418788182929981198.post-20413893669200350052008-10-18T05:00:00.000+07:002008-11-23T22:58:53.101+07:00Create Vertical Menu<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKqJuCACQkksI4vCth0iMr-xbsGqoss1B49LpF7lmEnNFAoE-wZ_jAshfmOa0imFt0wBlUzM6qoqWDBMcx3ipIweN5fYvy31-LNCUiHtKIl_0wzQlEHr9BsCajf-rRxOYEKWqgLgYkypgY/s1600-h/blueprev.gif"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKqJuCACQkksI4vCth0iMr-xbsGqoss1B49LpF7lmEnNFAoE-wZ_jAshfmOa0imFt0wBlUzM6qoqWDBMcx3ipIweN5fYvy31-LNCUiHtKIl_0wzQlEHr9BsCajf-rRxOYEKWqgLgYkypgY/s320/blueprev.gif" alt="" id="BLOGGER_PHOTO_ID_5228247467146019442" border="0" /></a>We have learned how to create <a href="http://trick-blog.blogspot.com/2008/01/how-to-create-horizontal-tabs-menu.html">horizontal menu</a> before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it<span class="fullpost"><br /><br />1. Login to blogger then choose <b>"Layout-->Edit HTML"</b><br />2. Put the script below before this code <font color="#FF0000"> ]]></b:skin></font> or put it in CSS code area.<br /><br /><p class="alert">.glossymenu, .glossymenu li ul{<br />list-style-type: none;<br />margin: 0;<br />padding: 0;<br />width: 185px; /*WIDTH OF MAIN MENU ITEMS*/<br />border: 1px solid black;<br />}<br />.glossymenu li{<br />position: relative;<br />}<br />.glossymenu li a{<br />background: white url('http://blog.superinhost.com/vertical/<font color="#FF0000"><b>blue1.gif</b></font>') repeat-x bottom left;<br />font: bold 12px Verdana, Helvetica, sans-serif;<br />color: white;<br />display: block;<br />width: auto;<br />padding: 5px 0;<br />padding-left: 10px;<br />text-decoration: none;<br />}<br />.glossymenu li ul{ <br />position: absolute;<br />width: 190px; <br />left: 0;<br />top: 0;<br />display: none;<br />}<br />.glossymenu li ul li{<br />float: left;<br />}<br />.glossymenu li ul a{<br />width: 180px; <br />}<br />.glossymenu li a:visited, .glossymenu li a:active{<br />color: white;<br />}<br />.glossymenu li a:hover{<br />background-image: url('http://blog.superinhost.com/vertical/<font color="#FF0000"><b>blue2.gif</b></font>');<br />}<br /><br />* html .glossymenu li { float: left; height: 1%; }<br />* html .glossymenu li a { height: 1%; }</p><br /><br />You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :<br /><p class="alert">.glossymenu li a{<br />background: white url('http://blog.superinhost.com/vertical/<font color="#FF0000"><b>red.gif</b></font>') repeat-x bottom left;</p><br />dan<br /><p class="alert">.glossymenu li a:hover{<br />background-image: url('http://blog.superinhost.com/vertical/<font color="#FF0000"><b>red.gif</b></font>');</p><br /><br /><b>Vertical Menu Color :</b><br /><br /><table width="200px"border="0"><tr><td><img src="http://blog.superinhost.com/vertical/blueprev.gif"width="195"height="108"/></td><td><p>blue1.gif</p><p>blue2.gif</p></td></tr><tr><td><img src="http://blog.superinhost.com/vertical/greenprev.gif"width="196"height="106"/></td><td><p>green1.gif</p><p>green2.gif</p></td></tr><tr><td><img src="http://blog.superinhost.com/vertical/redprev.gif"width="195"height="106"/></td><td><p>red1.gif</p><p>red2.gif</p></td></tr><tr><td><img src="http://blog.superinhost.com/vertical/pinkprev.gif"width="196"height="107"/></td><td><p>pink1.gif</p><p>pink2.gif</p></td></tr><tr><td><img src="http://blog.superinhost.com/vertical/blackprev.gif"width="194"height="107"/></td><td><p>black1.gif</p><p>black2.gif</p></td></tr></table><br /><br />3. Save your template.<br />4. Then go to <b>"Page Elements"</b> menu<br />5. choose <b>"Add a Gadget -->HTML/JavaScript"</b> the insert the code below. <br /><br /><p class="alert"><ul id="verticalmenu" class="glossymenu"><br /><li><a href="/">Home</a></li><br /><li><a href="<font color="#FF0000">http://trik-tips.blogspot.com</font>"><font color="#0000FF">Trik Blog</font></a></li><br /><li><a href="<font color="#FF0000">http://x-template.blogspot.com</font>" ><font color="#0000FF">Free Template</font></a></li><br /><blink><b><li><a href="<font color="#FF0000">http://getebook.co.cc</font>"><font color="#0000FF">Free Ebook</font></a></li></b></blink><br /></li><br /></ul></p><br /><br />Note :<br />- The red code is the links.<br />- The Blue code is anchor text.<br />- If you want to add menu, just copy the blink code and paste it.<br /><br />6. Then click <b>"Save"</b><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com247tag:blogger.com,1999:blog-6418788182929981198.post-5962421372170162692008-10-01T06:35:00.000+07:002008-11-23T22:58:53.101+07:00Create Tab ViewTab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below)<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQLGhHDJaf-XlEOPMt4ZtL4arjz9pmKkgcOMWBnmjVYtUh6FIe1qDkV9Wa9q2W6aNPi-1qeMSILqduGmBWl3P3R9THpVPZXWdwolr-JFHH6PSECi5ZWEhOGx3N6neTZq7FWJl75mVxPY4S/s1600-h/tabview.jpg"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQLGhHDJaf-XlEOPMt4ZtL4arjz9pmKkgcOMWBnmjVYtUh6FIe1qDkV9Wa9q2W6aNPi-1qeMSILqduGmBWl3P3R9THpVPZXWdwolr-JFHH6PSECi5ZWEhOGx3N6neTZq7FWJl75mVxPY4S/s320/tabview.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5229615148874790498" /></a><br /><span class="fullpost"><br />Here is Tutorial how to create a tab view:<br /><br />1. Login to blogger, go to <b>"Layout --> Edit HTML"</b><br />2. Then find this code <span style="color:#ff0000;"><b>]]></b:skin></b></span><br />3. Insert the below code before <span style="color:#ff0000;"><b>]]></b:skin></b></span> or in CSS tag.<br /> <p class="alert">div.TabView div.Tabs<br /> {<br /> height: 24px;<br /> overflow: hidden;<br /> }<br /> div.TabView div.Tabs a<br /> {<br /> float: left;<br /> display: block;<br /> width: 90px;<span style="color:#ff0000;"> /* Width top main menu */</span> <br /> text-align: center;<br /> height: 24px; <span style="color:#ff0000;">/* Height top main menu */</span><br /> padding-top: 3px;<br /> vertical-align: middle;<br /> border: 1px solid #000; <span class="fullpost"><span style="color:#ff0000;">/* Top Main menu border color */</span></span><br /> border-bottom-width: 0;<br /> text-decoration: none;<br /> font-family: "Times New Roman", Serif; <span style="color:#ff0000;">/* Top main menu font */</span><br /> font-weight: 900;<br /> color: #000; <span style="color:#ff0000;">/* Top main menu font color */</span> <br />}<br /> div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active<br /> {<br /> background-color: #FF9900; <span style="color:#ff0000;">/* Top main menu background color */</span><br /> }<br /> div.TabView div.Pages<br /> {<br /> clear: both;<br /> border: 1px solid #6E6E6E;<span style="color:#ff0000;"> /* Content Border color */</span><br /> overflow: hidden;<br /> background-color: #FF9900;<span style="color:#ff0000;"> /* Content background color */</span><br /> }<br /> div.TabView div.Pages div.Page<br /> {<br /> height: 100%;<br /> padding: 0px;<br /> overflow: hidden;<br /> }<br /> div.TabView div.Pages div.Page div.Pad<br /> {<br /> padding: 3px 5px;<br /> }</p><br /><br />4. You can change the code according to the red text explanation. To get html color code see <a href="http://trick-blog.blogspot.com/2008/05/html-color-codes.html">HERE</a> <br />5. The next step is put the code below before <b><span style="color:#ff0000;"></head></span></b><br /><br /><p class="alert"><script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/></p><br /><br />6. Then <b>"save"</b> it.<br />7. Go to <b>"Page Elements"</b> menu<br />8. Chose <b>"Add Page Element" --> "HTML/Javascript"</b> in place where you want to put this tab.<br />9. Insert this code :<br /><p class="alert"><form action="tabview.html" method="get"><br /> <div class="TabView" id="TabView"><br /> <div class="Tabs" style="width: <span style="color:#0000ff;">350px</span>;"><br /><span style="color:#00ff00;"><a>Tab 1</a><br /><a>Tab 2</a><br /><blink><a>Tab 3</a></blink></span><br /></div><br /><div class="Pages" style="width: <span style="color:#0000ff;">350px</span>; height: <span style="color:#0000ff;">250px</span>;"><br /><br /><div class="Page"><br /> <div class="Pad"><br /><span style="color:#ff0000;"> Tab 1.1 <br /><br /> Tab 1.2 <br /><br /> Tab 1.3 <br /></span><br /> </div><br /> </div><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><span style="color:#ff0000;"> Tab 2.1 <br /><br /> Tab 2.2 <br /><br /> Tab 2.3 <br /></span><br /> </div><br /> </div><br /><br /> <blink><div class="Page"><br /> <div class="Pad"><br /><span style="color:#ff0000;"> Tab 3.1 <br /><br /> Tab 3.2 <br /><br /> Tab 3.3 <br /></span><br /> </div><br /> </div></blink><br /><br /> </div><br /> </div><br /> </form><br /><br /><script type="text/javascript"><br /> tabview_initialize('TabView');<br /> </script></p><br /><br /><b>Note :</b><br />- The number or the blue text(<span style="color:#0000ff;">350px</span>) Is size of the tabview.<br />- The green code is the main menu text<br />- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.<br />- To add more menu, see on the blink code. Add the code under it.<br /><br />Good luck every body.<br /><br /><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com249tag:blogger.com,1999:blog-6418788182929981198.post-45825750776255195492008-09-07T21:48:00.001+07:002012-01-17T06:18:56.455+07:00Show Recent Comments<div style="text-align: justify;">It's very usefull to Show Recent Comments on main blog page. We can know who have given comments on aur articles without open it one by one. At this time I will show you how to show recent comments on our main page blog. It's very easy</div><br /><span class="fullpost"><br />1. Login to blogger then go to <b>"Layout"</b><br />2. Then copy this code :<br /><p class="alert"><script style="text/javascript" src="http://superinhost.com/blog/comments.js"></script><br /><script style="text/javascript"><br />var numcomments = <span style="color: rgb(255, 0, 0);">8</span>;<br />var showcommentdate = true;<br />var showposttitle = true;<br />var numchars = 100;<br />var standardstyling = true;<br /></script><br /><script src="http://<span style="color: rgb(255, 0, 0);">trick-blog.blogspot.com</span>/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></p><br />- The 8 number is the sum of comments that will show up.<br />- Change <span style="font-weight: bold; color: rgb(255, 0, 0);">trick-blog.blogspot.com</span> with your blog's name.<br /><br />3. You can show it in page elements. Just click on <b>"add page elements --> HTML/Javascript"</b> Then insert the script in it.<br /><br />Or you can plug it in the "<a href="http://trick-blog.blogspot.com/2008/07/create-tab-view.html">Tab View</a>"<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com242tag:blogger.com,1999:blog-6418788182929981198.post-22855976497168299012008-07-18T03:43:00.000+07:002008-11-23T22:59:38.607+07:00Setting Domain Blogspot With co.cc Domain<div style="text-align: justify;">co.cc is a free domain. It's not only URL forwarding but we can setup DNS Records, A, MX, and CNAME records. We can change our blog's name to become "name.co.cc". It's more simple than we use domain "name.blogspot.com". To change our default blogspot name to co.cc domain name there are some steps to do. Here is the tutorial to setup domain co.cc</div><br /><span class="fullpost"><br />1. Open your browser to <a href="http://www.co.cc/?id=140833" target="_blank">co.cc</a><br />2. Then regiter a domain that you want to use.<br />3. If it's no available you have to find another domain name. But if it's available then you can register it.<br />4. The you have to setup your domain. Got to "setup-->Manage domain"<br />5. Choose <b>"Zone Records"</b><br />6. In the coloumn "Host" fill it with your domain name (www.yourdomainname.co.cc")<br />7. Choose "CNAME" for "Type"<br />8. In the "Value" box fill it with <b>"ghs.google.com"</b><br />9. Then click "Setup" Button.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZz_t00DS_al9Emmu_pprgQqeNWsFw30Wm3UNd7e5YZUSArEFEAOHDYHX4-LT_botTpChvLM1r6XPF6ns489MG517dsmOVHQe_zCidm2kuDTRR0q8Sz7zK7Htv1goVRc7B4GW-QSGmy8o/s1600-h/zonerecord.gif"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZz_t00DS_al9Emmu_pprgQqeNWsFw30Wm3UNd7e5YZUSArEFEAOHDYHX4-LT_botTpChvLM1r6XPF6ns489MG517dsmOVHQe_zCidm2kuDTRR0q8Sz7zK7Htv1goVRc7B4GW-QSGmy8o/s320/zonerecord.gif" alt="" id="BLOGGER_PHOTO_ID_5220053033865442930" border="0" /></a><br /><br />The next step is make some setup in blogspot.<br /><br />1. Login to Bloggr/blogspot then choose <b>"Setting-->Publishing"</b><br />2. Then choose <b>"Switch to: • <span style="color: rgb(0, 0, 255);"><u>Custom Domain</u></span></b><br />3. Then click on <b>"Already own a domain? <span style="color: rgb(0, 0, 255);"><u>Switch to advanced settings</u></span>"</b><br />4. Fill it with your new domain in the <b>"Your Domain"</b> coloumn.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8yL1O1NN-IQVr7uE3kHB1RnsXF8yomAF5BRM7_YNuNvsfO86KSeQSVaHI8gZVJdOzdW71t2oVjoN-zZJvtW4d1Z3ox2UR17L1yqn-ixA_GTa7R9aYCUkH6FEAvx3RmPmLJgsG3obc9RSW/s1600-h/namadomain.gif"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8yL1O1NN-IQVr7uE3kHB1RnsXF8yomAF5BRM7_YNuNvsfO86KSeQSVaHI8gZVJdOzdW71t2oVjoN-zZJvtW4d1Z3ox2UR17L1yqn-ixA_GTa7R9aYCUkH6FEAvx3RmPmLJgsG3obc9RSW/s320/namadomain.gif" alt="" id="BLOGGER_PHOTO_ID_5220057959826202626" border="0" /></a><br /><br />5. To Finish click <b>"Save Setting"</b> Button.<br /><br />It will take 1-48 hours for your new domain to work. So be patient....<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com198tag:blogger.com,1999:blog-6418788182929981198.post-13020172176963749302008-06-29T05:47:00.001+07:002008-11-23T22:59:55.094+07:00Blogger Under Posting Comment box<div style="text-align: justify;">Now, blogger(blogspot) have developed their comment box. Last time ago, if we want to post a comment there should be only a link under our posting, and we have to click the link send a comment, it's not interesting. But now we can find a comment box under our post exactly. It's original from blogger, it's not like haloscan or intensedebate. But it's truely from blogger/blogspot. You can see it under this post.<br /></div>Here is the trick to create comment box under your post.<br /><span class="fullpost"><br />1. Login to <a href="http://draft.blogger.com/" target="_blank">http://draft.blogger.com</a><br />2. Go to <b>Setting-->Comments</b>. then change <b>"Comment Form Placement"</b> to be <b>"Embedded below post"</b> (look at the image below)<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuB_XmTHmeew80Q0KQvA7i77JgzWyClDGNUYi2qhmq-TSuDFxjFZwWlLTcIWEOy0XkEefSrc-w34FDEGQho0gM7nhzpxxCmNQ0PIBo1um7rhBVt7vLCIYAaNakUs9xV-6Qg5v6vlr1yk/s1600-h/comment.jpg"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfuB_XmTHmeew80Q0KQvA7i77JgzWyClDGNUYi2qhmq-TSuDFxjFZwWlLTcIWEOy0XkEefSrc-w34FDEGQho0gM7nhzpxxCmNQ0PIBo1um7rhBVt7vLCIYAaNakUs9xV-6Qg5v6vlr1yk/s320/comment.jpg" alt="" id="BLOGGER_PHOTO_ID_5217071362674727298" border="0" /></a><br /><br />3. Then <b>"Save Setting"</b><br />Try to see your blog and klik on your titile post. if there is a embadded commnet box below your post just stop this step here. But if there is no comments box, just follow the next steps here. <br /><br />4. Go to <b>"Layout-->Edit HTML"</b><br />5. Check the <b>"Expand widget templates"</b> box.<br />6. Find this code :<br /><p class="alert"><span style="color: rgb(0, 0, 255);"><p class='comment-footer'><br /><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br /><data:postCommentMsg/></a><br /></p><br /></b:if></span></p><br /><br />7. Then replace it with this code :<br /><p class="alert"><span style="color: rgb(0, 0, 255);"><p class='comment-footer'><br /><b:if cond='data:post.embedCommentForm'><br /><b:include data='post' name='comment-form'/><br /><b:else/> <b:if cond='data:post.allowComments'><br /><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br /><data:postCommentMsg/></a><br /></b:if> </b:if> </p> </b:if></span></p><br />8. Save your Template.<br /><br />I've deleted my last comment box (haloscan). so now I lost all of my comments before. I do it to get this comment box.</span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com257tag:blogger.com,1999:blog-6418788182929981198.post-90337902771589904912008-06-16T21:08:00.000+07:002008-11-23T23:00:15.565+07:00Show Related Article to Your Post<div style="text-align: justify;">The advantage of showing related article to your post is it will help your readers find more information related to the topics. This is base on label or category. This is usually put to the end of the article. After your visitors finish read your article, they will find some links that related to the post base on label or category.<br /></div>Here's the tutorial to create "related article to your spot":<br /><span class="fullpost"><br />1. Login to Blogger<br />2. Go to "Layout-->Edit HTML"<br />3. Click on "Expand Widgets Template" checkbox.<br />4. Then download <a href="http://blog.superinhost.com/relatedpost.txt" target="_blank">THIS SCRIPT</a> or <a href="http://kendhin.890m.com/relatedpost.txt" target="_blank">HERE</a>.<br />5. Open it then copy the scripts.<br />6. Paste the script after this code : <span style="color: rgb(255, 0, 0);"><data:post.body/></span>. If you have "Read more widget" you will find two codes. Put it under the first code.<br />7. Save your template.<br /><br />Good Luck...<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com82tag:blogger.com,1999:blog-6418788182929981198.post-69476889924108880032008-06-08T16:01:00.000+07:002008-06-08T16:20:01.013+07:00Free Web Hosting Without Ads<div style="text-align: justify;">If we have a/some blogs, webhosting is important to support our blog running. web hosting is use for put our files such as images, sound, script, videos and many more. We can use use paid hosting or free hosting, but I suggested you to use <a href="http://www.000webhost.com/42283.html" target="_blank">000webhost</a> as your web hosting. <a href="http://www.000webhost.com/42283.html" target="_blank">000webhost</a> is a free web hosting service with full feature and no force ads. <a href="http://www.000webhost.com/42283.html" target="_blank">000webhost</a> is an amazing web hosting service. It's free web hosting that gives many features such as:<br /></div>- 250 MB Disk Space<br />- 100 GB Data Transfer<br />- cPanel Control Panel<br />- Fantastico De Luxe 1-Click Autoinstaller<br />- Website Builder Software<br />- PHP Scripts Autoinstaller<br />- MySQL Databases<br />- Curl, GD2 library, ImageMagick, Zend<br />- and much more features are enabled<br /><span class="fullpost"><br />But to make your web hosting running well you must folow their rule.<br />Here is the most important rules:<br /><br />1. No adult content or any kind.<br />2. No warez / hacking / phishing sites<br />3. No mass mailers / spammers (account will be automatically suspended if you will try to send mass mail), so if your software supports such feature, disable it right now.<br />4. We do not allow any public image or file hosting server scripts to be run.<br />5. Chat, proxy, or file download scripts are not allowed.<br />6. Paid-to-surf, auto-surm, buxto, and any other similar scripts are banned<br />7. We do not allow online gaming scripts such as ogame, mafia, etc..<br />8. Nulled software such as ip.board or vbulletin is not allowed to be hosted<br />9. Account cannot be used only to store files.<br /><br />What are you waiting for, just <a href="http://www.000webhost.com/42283.html" target="_blank">SIGN UP HERE</a><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com34tag:blogger.com,1999:blog-6418788182929981198.post-48243587377011699092008-06-05T05:38:00.000+07:002008-11-23T23:00:42.316+07:00Free Domain co.cc<div style="text-align: justify;">Do you feel your blog name is too long?<br />If we create a blog, use blogspot or wordpress service, we have to make a name to our blog, it should be like "name.blogspot.com" or "name.wordpress.com". Do you feel it's such as a long name? If we have some money, we can buy a domain, and then our blog name would be like name.com or name.net or name.co.uk name.us etc.<br /></div><br /><div style="text-align: justify;">But now, we can to get free domain to cut up our blog name. it's <a href="http://www.co.cc/?id=140833" target="_blank">co.cc</a> service. We can register domain to <a href="http://www.co.cc/?id=140833" target="_blank">co.cc</a>, our blogname will be like "name.co.cc". It's free, no payment needed, no setup fee and it's easy to setup. I thinnk it's very good service that offer us a free domain name. I have try it for some of my blogs, and it's interesting. So what are you waiting for.....<br /></div><br /><a href="http://www.co.cc/?id=140833" target="_blank"><img src="http://www.co.cc/img/affiliates/cocc_420x_1.gif" alt="CO.CC:Free Domain" border="0" /></a><br /><span class="fullpost"><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com37tag:blogger.com,1999:blog-6418788182929981198.post-10443166556983111512008-05-30T17:38:00.000+07:002008-11-23T23:01:06.374+07:00Get Paid From Bloggerwave<div style="text-align: justify;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIAKmSDXuAqhVP9UijueOc1GX6u9i-k_W12YWmbCH5i56GWfSgc9y5J1MvhohfExsh29o57_Lrra9Re7eJwGDV9pTDDPhgFDS1u15R3X8HhMaY8EmZtcOCrcgKrgMUxD8Sgx7NOAOcW6o/s1600-h/bloggerwave.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIAKmSDXuAqhVP9UijueOc1GX6u9i-k_W12YWmbCH5i56GWfSgc9y5J1MvhohfExsh29o57_Lrra9Re7eJwGDV9pTDDPhgFDS1u15R3X8HhMaY8EmZtcOCrcgKrgMUxD8Sgx7NOAOcW6o/s320/bloggerwave.jpg" alt="" id="BLOGGER_PHOTO_ID_5208348933397954162" border="0" /></a><a rel="nofollow" href="http://www.bloggerwave.com/blog_ClickTrack.php?OpportunityId=31&BlogId=9772&LinkId=0">Bloggerwave</a> is one of PPP (Pay Per Post) Program. It's like sponsoredreviews, buyblogreview and other PPP program. They provide some jobs to be reviewed by bloger. It's such as writing an article about a website or company and then we post it in our blog. To be approved to <a rel="nofollow" href="http://www.bloggerwave.com/blog_ClickTrack.php?OpportunityId=31&BlogId=9772&LinkId=0">Bloggerwave</a> is easier than other PPP programs. No PR needed or any others criteria. So I thing this is a good PPP program<br /></div><br /><a href="http://www.bloggerwave.com/" target="_blank" rel="nofollow"><img src="http://bloggerwave.com/blogviewcount.php?pic=sponsorlogo.gif&OpportunityId=31&BlogId=9772" /></a><br /><span class="fullpost"><br /><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com41tag:blogger.com,1999:blog-6418788182929981198.post-65091952388924574022008-05-26T05:44:00.000+07:002008-11-23T23:01:37.472+07:00HTML Color CodesColor is very important to design a blog. But to give a color to background or text or table it's not as simple as looks like, we have to know tho color code. With HTML color codes you can set the color of web site background, color of text, cells in tables and much more. With this dynamic HTML color codes chart you can get codes for basic colors.<br />Click on any color to get it's HTML color code:<br /><span class="fullpost"><br /><iframe src="http://kendhin.890m.com/kodewarna.html" title="kendhinx" frameborder="0" height="480" scrolling="auto" width="480"></iframe><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com44tag:blogger.com,1999:blog-6418788182929981198.post-9960320671452382652008-05-11T04:06:00.000+07:002008-11-23T23:02:12.507+07:00Back up Your BlogBack up blog? is it important? <br />Yes it's very important. Because we can't guarantee that our blog will exist forever. Lately, many blogers lost their blogs because of unpredicted fault . Few months ago I lost all of my blog (it'a about 10 blogs), but now I got some of them back. Since then I know how important to back up our blog. It's really frustating when your hard work suddenly lost. <br /><span class="fullpost"><br />There is a free service website that allow us to back up our blog. It's name is <a href="http://www.blogbackuponline.com/" target="_blank">blogbackuponline</a>. They give us a space for 5 MB. Althought it's small but I think it's enough for us to backup our blog. If our avarage posted arcticle is 1000 character, meaning it can backup until 5000 title. It's for free version. They also provide more features for premium account. Just go to <a href="http://www.blogbackuponline.com/" target="_blank">blogbackuponline</a> and back up your blog there. <br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com38tag:blogger.com,1999:blog-6418788182929981198.post-9340685020801262612008-05-05T00:55:00.000+07:002008-11-23T23:03:53.861+07:00Put Paypal Donation Box to Blog<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjljJHAw4HAVQbaNpOzOmYC-jbGmFUnlY10Uu9FUa2PU1_UBFhvHBGXchiGWpozS18Avear3ilaVRuffCwabMO62UH5L-rHjfok-OqvrO_gIr7TBLuAq37ILTm1aaIBCg86qE0Jdi3mZPs/s1600-h/paypal-donation-box.PNG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjljJHAw4HAVQbaNpOzOmYC-jbGmFUnlY10Uu9FUa2PU1_UBFhvHBGXchiGWpozS18Avear3ilaVRuffCwabMO62UH5L-rHjfok-OqvrO_gIr7TBLuAq37ILTm1aaIBCg86qE0Jdi3mZPs/s320/paypal-donation-box.PNG" alt="" id="BLOGGER_PHOTO_ID_5196587375653750914" border="0" /></a>Do you want to put this box in your blog/site? Well many of us want put this code on their own blog/site like those popular sites but they don't know how. Well i am very glad to teach you and going tell you how.<br />If you don't have a paypal account, click <a style="font-weight: bold;" href="https://www.paypal.com/row/mrb/pal=SJXUFBUJLHAHG">here</a> to sign up one. Well i supply the code, and you just simply copy and paste it, is that simple.<br />Ok here we go.<br /><span class="fullpost"><br /><br />Just copy the code and change some values in <span style="color: rgb(255, 0, 0); font-weight: bold;">red</span>.<br />Change <span style="color: rgb(255, 0, 0); font-weight: bold;">Blog/Website Title</span> to your own Blog title example change to "The-Online-Quest".<br />And change <span style="color: rgb(255, 0, 0); font-weight: bold;">Your paypal email</span> to your own paypal email.<br /><br /><b>Code:</b><br /><br /><center><pre class="alt2" dir="ltr" style="border: 2px inset ; margin: 0px; padding: 6px; overflow: auto; width: 400px; height: 300px; text-align: left;"><!-- The-Online-Quest Pay Pal Donation Form Code Start --><br /><br /><center><br /><table border="1" width="143" cellspacing="0" cellpadding="0" bordercolorlight="#FFF8E8" bordercolordark="#EFE0C9"><br /><tr><br /><td><br /><p align="center"><b>Please Donate To My Blog</b><br /></p></td><br /></tr><br /><tr><br /><td width="145"><br /><form action="https://www.paypal.com/row/cgi-bin/webscr" name="_xclick" method="post"><br /><input value="Thanks for Your Donations - <span style="color: rgb(255, 0, 0); font-weight: bold;"><span>Blog</span></span><span style="color: rgb(255, 0, 0); font-weight: bold;">/</span><span style="color: rgb(255, 0, 0); font-weight: bold;"><span>Website</span></span><span style="color: rgb(255, 0, 0); font-weight: bold;"> Title</span>" name="item_name" type="hidden"/><br /><input value="<span style="color: rgb(255, 0, 0); font-weight: bold;"><span>Your</span></span><span style="color: rgb(255, 0, 0); font-weight: bold;"> </span><span style="color: rgb(255, 0, 0); font-weight: bold;"><span>paypal</span></span><span style="color: rgb(255, 0, 0); font-weight: bold;"> email</span>" name="business" type="hidden"/><br /><p style="margin-top: 0; margin-bottom: 0"><br /><input value="_xclick" name="cmd" type="hidden"/><br /><!-- input type="hidden" name="amount" value="1.00" --><br /><b>Amount</b> <p style="margin-top: 0; margin-bottom: 0"> <select name="Amount" size="1"><br /><option selected value="1.00"/>1.00<br /><option value="2.00"/>2.00<br /><option value="3.00"/>3.00<br /><option value="4.00"/>4.00<br /><option value="5.00"/>5.00<br /><option value="10.00"/>10.00<br /><option value="15.00"/>15.00<br /><option value="20.00"/>20.00<br /><option value="25.00"/>25.00<br /><option value="30.00"/>30.00<br /><option value="35.00"/>35.00<br /><option value="40.00"/>40.00<br /><option value="45.00"/>45.00<br /><option value="50.00"/>50.00<br /><option value="100.00"/>100.00<br /><option value="200.00"/>200.00<br /><option value="300.00"/>300.00<br /><option value="400.00"/>400.00<br /><option value="500.00"/>500.00<br /><option value="1000.00"/>1000.00<br /></select><br /><p style="margin-top: 0; margin-bottom: 0"><b>Currency</b> <select name="currency_code" size="1"><br /><option value="AUD"/>Australian Dollar<br /><option selected value="USD"/>USD<br /><option value="GBP"/>British Pound<br /><option value="CAD"/>Canadian Dollars<br /><option value="CZK"/>Czech Koruna<br /><option value="DKK"/>Danish Kroner<br /><option value="EUR"/>EUR<br /><option value="HKD"/>Hong Kong Dollars<br /><option value="HUF"/>Hungarian Forint<br /><option value="JPY"/>Japanese YEN<br /><option value="NZD"/>New Zealand Dollars<br /><option value="NOK"/>Norwegian Kroner<br /><option value="PLN"/>Polisg Zlotych<br /><option value="SGD"/>Singapore Dollars<br /><option value="SEK"/>Swedish Kronor<br /><option value="CHF"/>Swiss Francs<br /></select><br /></p><br /><p style="margin-top: 0; margin-bottom: 0" align="center"><br /><input border="0" alt="Make payments with PayPal - it's fast, free and secure!" width="60" src="http://www.blogpulp.com/imagehost/images/5971708800.gif" name="submit" height="30" type="image"/><br /></p><br /></p></p></form><br /></td></tr><br /><tr><br /><td><br /><p align="right"><b><font face="Arial" size="1">Powered by <a href="http://djyano.blogspot.com/2008/04/put-paypal-donation-code-to-your.html" target="_blank"> The-Online-Quest</a></font></b><br /></p></td><br /></tr><br /></table><br /></center><br /><br /><!-- End of The-Online-Quest Pay Pal Donation Form Code --><br /><br /></pre></center><br />For <b>blogger</b>, after you have copied and changed the values, just add a new page element. Click add <b>HTML/JavaScript</b> to blog, paste all the codes in and save changes.Enjoy blogging and have fun, if you have put this code in your blog/site, post a comment about it and please let me know.<br /><br />Original post by : <a href="http://djyano.blogspot.com/2008/04/put-paypal-donation-code-to-your.html" target="_blank">The Online Quest</a><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com33tag:blogger.com,1999:blog-6418788182929981198.post-61548385033819775942008-04-09T23:11:00.000+07:002008-11-23T23:04:14.885+07:00How to Create Dropdown MenuWhat is dropdown menu?<br />Dropdown menu is like this :<br /><br /><select onChange="document.location.href=this.options[this.selectedIndex].value;"> <option value="0" selected>Blog Archive</option> <option value="http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.html">How To Create Dtree Menu</option> <option value="http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html">How to Create Search Engine</option> </select><br /><br />Here is the trick how to create dropdown menu :<br /><br />Copy the code below and put it on your page elements.<br /><br /><br /><select onChange="document.location.href=this.options[this.selectedIndex].value;"><br /><option value="0" selected><font color="#0000FF">Blog Archive</font></option><br /><option value="<font color="#FF0000">Links 1</font>"><font color="#0000FF">Text 1</font></option><br /><option value="<font color="#FF0000">Links 2</font>"><font color="#0000FF">Text 2</font></option><br /></select><br /><br />The red text is links, change it with your links.<br />The blue text is Anchor text. Yau must change it.<br /><br />For example :<br /><span class="fullpost"><br /><br /><select onChange="document.location.href=this.options[this.selectedIndex].value;"><br /><option value="0" selected><font color="#0000FF">Blog Archive</font></option><br /><option value="<font color="#FF0000">http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.htmll</font>"><font color="#0000FF"> How to Create Dtree Menul </font></option><br /><option value="<font color="#FF0000">http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html</font>"><font color="#0000FF"> How to Create Search Engine </font></option><br /></select><br /><br />The result would be like this:<br /><br /><select onChange="document.location.href=this.options[this.selectedIndex].value;"> <option value="0" selected>Blog Archive</option> <option value="http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.html">How to Create Dtree Menu</option> <option value="http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html">How to Create Search Engine</option> </select><br /><br />To add more menu/item, put a code like below <br /><br /><option value="<font color="#FF0000">Links 3</font>"><font color="#0000FF">Text 3</font></option><br /><br />before this code <b></select></b><br /><br />If you want the links opened in new window, change the code below <br /><br /><font color="#FF0000"><select onChange="document.location.href=this.options[this.selectedIndex].value;"></font><br /><br />with this code ::<br /><br /><font color="#0000FF"><select onchange="javascript:window.open(this.options[this.selectedIndex].value);"></font><br /><br />The resul would be like this:<br /><br /><select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value="0" selected>Dropdown New Window</option> <option value="http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.html">How to Create Dtree Menul</option> <option value="http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html">How to Create Search Engine</option> </select><br /><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com33tag:blogger.com,1999:blog-6418788182929981198.post-32190025563897713992008-04-04T10:49:00.000+07:002008-04-06T10:54:28.648+07:00Free Unlimited File Hosting ServiceIf we have a web/blog especially about downloading like mp3, video, ebook etc, it’s need a webhost to put these files, and usually we like a free webhosting rather than paying. But there are some problems/limitations if we chose a free file hosting like :Bingung Cari Tempat Hosting Gratis Dan Unlimited? <br /><br />- Limited capacity/storage.<br />- No store big files bigger than 5 MB (Usually).<br />- traffic limitation (base on time)<br />- etc.<br /><br />Now I have a solution to solve the problems. Try to use <a href="http://www.ziddu.com/register.php?referralid=(y]RYC+QOe" target="_blank">ziddu</a>. <a href="http://www.ziddu.com/register.php?referralid=(y]RYC+QOe" target="_blank">ziddu</a> is one of the <b>free unlimited file hosting service</b>. What will you get from <a href="http://www.ziddu.com/register.php?referralid=(y]RYC+QOe" target="_blank">ziddu</a>? here is :<br /><span class="fullpost"><br />- Unlimited storage, (you can upload your files as much as possible).<br />- maximum file size to uploaded is 200 MB (it’s big enough)<br />- No huorly traffice limitation.<br />- Get paid everytime others download your files.<br />For the last poin, is it true that we will get paid everytime others download files? <br />Yes, it’s 100% true. You will get paid $0.001 per unique download. Cash will be transfered via paypal.<br /><br />If you interesting <a href="http://www.ziddu.com/register.php?referralid=(y]RYC+QOe" target="_blank">SIGN UP HERE</a> </span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com19tag:blogger.com,1999:blog-6418788182929981198.post-4584560103359411402008-03-31T19:35:00.001+07:002009-01-05T08:34:00.393+07:00How to Create Float ImageThis tutorial is about to create float image that will always show on your corner blog althought you drag side scroll bar. <a href="http://trik-tips.blogspot.com/" target="_blank">see example</a>. You can put an image, widget, clock etc on the corner.<br />Step by step to create Float image.<br /><span class="fullpost"><br />1. Login ke blogger then click <b>"Layout -->> Edit HTML</b><br />2. Find this code <span style="color:red;">]]></b:skin></span>, then put the code below above it.<br /><span style="color:blue;"><br />#float_corner {<br />position:fixed;_position:absolute;<b>bottom</b>:0px;<b>left</b>:0px;clip:<br />inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}</span><br /><br />3. The bold text is it’e position. you can change it with <b>"top", "bottom", "left", "right"</b><br />4. The next step is put the code below before tag<span style="color:red;"></body></span><br /><span style="color:blue;"><br /><div id="float_corner"><br /></span><span style="color:red;"><br /><a href="http://trik-tips.blogspot.com"> <img src="</span><br /><br /><span style="color:red;">http://blogoholic.info/files/soniclari.gif</span></span><span style="color:red;">" border="0" /></a><br /></span><br /><span style="color:blue;"></div></span><br /><br /><b>"http://trick-blog.blogspot.com"</b> is a link.<br /><b>"http://blogoholic.info/files/soniclari.gif"</b> is image URL, Change it with your own image.<br /><br />5. If you wanna fill it with a widget, change the red code with your widget code.<br />6. Save and preview your blog.<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com63tag:blogger.com,1999:blog-6418788182929981198.post-33336249793246440592008-03-22T11:06:00.000+07:002008-11-23T23:05:17.929+07:00How to Create Email Form SubscriptionThe function of Email Form Subscription is to let your loyal visitors to subscribe your new article/posting in to their email. So if your post a new article your subscriber will receive your article automatically. It’s very usefull, your subscriber will know if there is a new article, so they will come to visit your blog immediatly.<br />Here the trick to create Email Form Subscription<br /><span class="fullpost"><br />1. visit this site : <a href="http://www.feedburner.com/" target="_blank">http://www.feedburner.com</a><br />2. You will see a box to enter your blog feeds. enter your blog feeds in to the box. Usually your blog feeds is like this : <span style="color:#ff0000;">http://<b>YOURBLOGNAME</b>.blogspot.com/feeds/posts/default </span><br />3. If you have video file in your blog content, check on the "I am a podcaster"box, If not, it’s unnecessary. Then click "Next" Button.<br />4. After that, you must to fill a form, fill it with your information then click on the "Activate Feed"<br />5. If you’re succeed, you will see "Congrats your....." notificaton.<br />6. On the buttom you will see a "Next" Button and a link <b>"Skip directly to feed management"</b>, choose this link.<br />7. You will see some menus on top. Choose "Email Subscription" menu.<br />8. On the left you will see some menu again, now click on the <b>"Email Subscriptions"</b><br />9. Then click on the <b>"Activate"</b> button.<br />10. You will some code on the boxes. Choose code in the <b>"Subsciption Form Code"</b> box, and copy it. then click "Save" Button.<br /><br />11. To plug it on your blog, go to "Layout-->>Add Page element-->HTML/Javascript" paste your code on the box.<br /><br />See your blog, Now you have an "Email Form Subscription"<br />Congrats....<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com30tag:blogger.com,1999:blog-6418788182929981198.post-55531298384757724562008-03-11T03:05:00.000+07:002008-11-23T23:05:17.930+07:00How to Create Blogroll (Link List Box)As a bloger, we usually added our Friends link on our blog. Day by day and month by month it's number will increased. But if your friends link over than hundredsor or even thousands, it will be a problem, your blog space will full of your friends link list. <br />Now I will show you <b>how to create a blogroll</b>, a box to place your friends link list. You can fill it with as many as links, and it's size will not get bigger. So it will save space on your blog or sidebar. The box will be like mine.<br /><br />Here's the code that you should to copy and place on your blog or sidebar ("Add Page Element --> HTML/Java Script").<br /><span class="fullpost"><p class="alert"><font color="blue"><br /><div style="border: 1px solid rgb(153, 153, 153); <br /> overflow: auto; <br /> width: 200px; <br /> height: 300px; <br />text-align: center; "><br /><br />#link1 <br /><br />#link2 <br /><br />#link3 <br /><br />#link...<br /><br /></div></font><br /></p><br />Note:<br />- Text <font color="#FF0000"> width: 200px;</font> and <font color="#FF0000">height: 300px;</font> is size of the box, you can change it according to your place or sidebar size .<br />- Change the text <font color="#FF0000">"#link1,#link2, #link3 dst" </font> with your friends link list.<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com30tag:blogger.com,1999:blog-6418788182929981198.post-19239435874537574612008-03-05T15:07:00.000+07:002008-11-23T23:05:17.930+07:00Display Yahoo Messenger Status on BlogThe advantage of showing Yahoo Messenger status on your blog is your visittors can talk or ask something to you directly via YM, it will make your relationship with your visitor to be more tighly. Ok lets begin.<br /><br />If you’re oflfline, it will display image like this:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46LFK8ZsEgH0iiQFgPrbAK_Tv2N-WIDNHG2YftPYiJsIZZpKVoBq5NJPeX0HbGANhQomPQeXrx-kuQ0tN7sC_XWq4FsiAJisQHDAW9q1PtO9dVZsVuwbVxHzXNZc1RKo_x5xLduVVOCge/s1600-h/ofline.gif"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46LFK8ZsEgH0iiQFgPrbAK_Tv2N-WIDNHG2YftPYiJsIZZpKVoBq5NJPeX0HbGANhQomPQeXrx-kuQ0tN7sC_XWq4FsiAJisQHDAW9q1PtO9dVZsVuwbVxHzXNZc1RKo_x5xLduVVOCge/s320/ofline.gif" alt="" id="BLOGGER_PHOTO_ID_5171928950798826370" border="0" /></a><br /><br />And if you’re online, it will display icon like this:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnEV5T7qlaeYrQ7uzpDr-BF6fc7qnHddYfadnG00wO-AX6KJ7mcAW15af11PFqcbJAUywvz9O569dZsesnrePtIMuRvULFor3cLXYNrUryd2ue1taNX0KGWj_wEROEsmSUuLmD7Lhd4A2/s1600-h/online.gif"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnEV5T7qlaeYrQ7uzpDr-BF6fc7qnHddYfadnG00wO-AX6KJ7mcAW15af11PFqcbJAUywvz9O569dZsesnrePtIMuRvULFor3cLXYNrUryd2ue1taNX0KGWj_wEROEsmSUuLmD7Lhd4A2/s320/online.gif" alt="" id="BLOGGER_PHOTO_ID_5171929444720065426" border="0" /></a><br /><span class="fullpost"><br />It’s very simple to create it. You just copy the code below and put it on your <b>"Page Element"</b> or sidebar.<br /><p class="alert"><br /><a href="ymsgr:sendIM?<b><span style="color: rgb(255, 0, 0);">kendhin_x</span></b>"> <img src="http://opi.yahoo.com/online?u=<span style="color: rgb(255, 0, 0);"><b>kendhin_x</b></span>&amp;m=g&amp;t=<span style="color:blue;"><b>2</b></span>&amp;l=us"/><br /></a><br /></p><br />Change the red text (kendhin_x) with your YM id.<br />Look at the green number <b>"<font color="#00FF00">2</font>"</b>, you can change it. What the result of doing this? you will different image/icon as your YM status.<br /><br />You must try it !!!!<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com35tag:blogger.com,1999:blog-6418788182929981198.post-33746243285367203412008-02-27T18:53:00.000+07:002008-03-10T03:37:25.824+07:00How to Show Recent Post on the SidebarTo show your recent post on the sidebar is very easy, you just follow the instruction below then you will see your recent post on your blog sidebar. here’s the steps :<br /><br />1. Login to Blogger then Chose <b>"Layout"</b><br />2. Click on <b>"Add page element"</b> (chose where you want to put it) then chose <b>"HTML/Javascript"</b><br />3. Copy the code below and put it in the <b>"content"</b> box.<br /><br /><span style="color: rgb(0, 0, 255);"><script src="http://www.geocities.com/uddin_81/recent-post.js"></script><br /><script>var numposts = <span style="color: rgb(255, 0, 0);">10</span>; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script><br /><script src="http://<span style="color: rgb(255, 0, 0);">YOURBLOGNAME</span>.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"><br /></script></span><br /><br />4. Change <span style="color: rgb(255, 0, 0);">YOURBLOGNAME</span> with your blogname.<br />5. The number <b>"10"</b> it’s amount of recent post that will be shown, You can change it.<br />6. Click Save.<br /><br />Get Try it .......Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com38tag:blogger.com,1999:blog-6418788182929981198.post-47385326388237879322008-02-21T21:09:00.000+07:002008-11-23T23:05:49.317+07:00Widget to Put Comment Box Under Posting<p>Sometimes ago I have posted an articel about "How to Create Commnet Box Under Posting" it use haloscan comment box. It working well for some bloger and bad for some bloger too. If you failed or dislike using haloscan comment box, may be this will be alternatifvfor you. This comment box is created by <a href="http://www.intensedebate.com" target="_blank" >intensedebate.com</a>, this comment box can be use as a widget, and to apply this widget is very simple, and to remove this is more simple it just like when you remove Page Element from your blog. Ok, if you interest to try this widget I’ll show you how to put it.</p><span class="fullpost"><br /><p>1. Login to Blogger.com the chose <b>"Layout --> Edit HTML"</b>, click on the link <strong>"Download Full Template" </strong>to backup your template first </p><br /><p>2. Then go to <a href="http://www.intensedebate.com" target="_blank" >intensedebate.com</a> site sgn up, the login and go to <b>"dashboard"</b> </p><br /><p>3. On the up right you will see <b>"add blog" button</b>, click the button </p><br /><p>4. Then you will see a box to insert your blog url, fill it then press the button . </p><br /><p>5. Then you will see a page like this:</p><br /><p><img src="http://x3x.890m.com/intense.jpg" height="272" alt="intense" width="350" border="0" /> </p><br /><p>6. For easy, chose<b>"Widget (Recomended)".</b> </p><br /><p>7. There are some choice on the <strong>"Replace Comment System". </strong>Chose <b>"On post without comments"</b> if you want the comment box show under no comment articel (your previouse comment still exist). If you want the comment box exist on every posting chose <b>"On all blog post"</b> (You will lose your previouse comments, but it can be restored). </p><br /><p>8. The click <b>"Complete Installation" button.</b> </p><br /><p>9. You will see the page like this :</p><br /><p><img src="http://x3x.890m.com/addwidget.jpg" height="165" alt="addwidget" width="350" border="0" /> </p><br /><p>10. Chose your blog then click <strong>"ADD WIDGET" </strong>button. </p><br /><p>Finish...</p></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com311tag:blogger.com,1999:blog-6418788182929981198.post-74925843597612575512008-02-19T20:50:00.000+07:002008-11-23T23:06:22.176+07:00Tutorial to Create DTree MenuDTree is a menu that be arranged like a tree. It will be like menu when you open "windows Explorer". It's very usefull if you have many posting (articel) in your blog. It can contain many link in small space. It will be like the below image :<br /><br /><img src="http://blogoholic.info/files/dtree/dtree.gif" height="198" width="176" /><br /><br />Here's the step by step tutorial to create "DTree Menu" in blogger:<br /><span class="fullpost"><br />1. Login to Blogger, go to <b>"Layout --> Edit HTML"</b><br />2. Put the code below over <span style="color:#ff0000;"><head></span><br /><br /><span style="color:#0000ff;"><link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" /><br /><script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script></span><br /><br />3. Save your editting.<br /><br />4. Now edit end copy the below code then put on your sidebar.<br /><br /><span style="color:#0000ff;"><div class="dtree"><br /><script type="text/javascript"><br /> <!--<br /> d = new dTree('d');<br /> d.add(0,-1,'My example tree');<br /> d.add(<span style="color:#ff0000;">1</span>,0,'Node 1','<b>link.html</b>');<br /> d.add(<span style="color:#008000;">2</span>,<span style="color:#ff0000;">1</span>,'Node 1.1','<b>link.html</b>');<br /> d.add(<span style="color:#8000ff;">3</span>,<span style="color:#008000;">2</span>,'Node 1.1.1','<b>link.html</b>');<br /> d.add(4,<span style="color:#8000ff;">3</span>,'Node 1.1.1.1','<b>link.html</b>');<br /> d.add(<span style="color:#ff00ff;">5</span>,0,'Node 2','<b>link.html</b>');<br /> d.add(6,<span style="color:#ff00ff;">5</span>,'Node 2.1','<b>link.html</b>');<br /> d.add(7,5,'Node 2.2','<b>link.html</b>');<br /> d.add(8,0,'Node 3','<b>link.html</b>');<br /> d.add(9,0,'Node 5','<b>link.html</b>');<br />document.write(d);<br />//--><br /> </script><br /></div></span><br /><br />Change <b>"link.html"</b> with your own link.<br />The first number must be unique (d.add(<b><span style="color:#ff0000;">1</span></b>,0,'Node 1','link.html');<br />The second number is child of the number (look at the color).<br /><br />You can add the below code to add a new node with your own image<br /><br /><span style="color:#0000ff;"> d.add(10,0,'Profile','link.html','','','<span style="color:#ff0000;">http://blogoholic.info/files/dtree/trash.gif</span>');</span><br /><br />change "<span style="color:#ff0000;">http://blogoholic.info/files/dtree/trash.gif</span>" with your own image.<br />it will be like this :<br /><br /><img src="http://blogoholic.info/files/dtree/dtreeprof.gif" height="219" width="176" /><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com42tag:blogger.com,1999:blog-6418788182929981198.post-95275878115746522008-02-13T09:35:00.000+07:002008-11-23T23:06:51.448+07:00Tutorial to Create Blogger TemplateThis tutorial is to create simple blogger template, with simple methods. The easiest way to create blogger template is by edit a template. But don't worry, althought this is a simple methods but it can produce a beautifull template, it depend on how you design it. This tutorial is not to create blogger template from beginning but this is to create template by editing a template. Ok lets begin.<br />Before we begin I suggest you to create a new blog,weI don't wont to destroy your blog.<br />To follow this tutorial you have to download this template first. <a href="http://www.ziddu.com/download/1540565/template.rar.html" target="_blank">downlad template</a>.<br /><br /><span class="fullpost"><br />We will create a template that contain four main elements, (Bakground, Header, Main and Footer) Like the image :<br /><br /><img src="http://blogoholic.info/files/template.jpg" height="277" width="400" /><br /><br />So you have to create the four elements, You can use Image editor software like Adobe Photoshop, Corel Draw, Paint, etc.<br />Here's the detail to design it:<br />1. Create a design like above image.<br />2. On the backgroun part it should be a Pattern/Tile.<br />3. Cut for every part (Background, Header, Main and Footer)<br />it should be like this :<br /><br /><a href="http://blogoholic.info/files/bg.gif" target="_blank"><img src="http://blogoholic.info/files/bg.gif" height="36" width="30" /> </a>background<br /><a href="http://blogoholic.info/files/head.jpg" target="_blank"><img src="http://blogoholic.info/files/head.jpg" height="76" width="410" /> </a>header<br /><a href="http://blogoholic.info/files/body.jpg" target="_blank"><img src="http://blogoholic.info/files/body.jpg" height="5" width="410" /></a> main<br /><a href="http://blogoholic.info/files/foot.jpg" target="_blank"><img src="http://blogoholic.info/files/foot.jpg" height="19" width="410" /> </a> footer<br /><br />4. Upload your part image on the webhosting like geocities or on the image hosting like photobucket.<br /><br />Alll right, now we will arrange these part to the HTML.<br />1. Go to blogger then go to "EDIT HTML" menu.<br />2. Click on the <b>"Brows"</b> button to upload above template or <a href="http://kendhin.890m.com/template/template.xml">this template</a><br />3. Find this code<br /><span style="color:#0000ff;"><br />body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('<b>http://blogoholic.info/files/bg.jpg</b>') repeat-x top left; }<br /></span><br />4. Change the bold text with your image location<br />5. Then find this code, and change the blod text with your image location :<br /><br /><span style="color:#0000ff;">#center {background: #ffffff url('<b>http://blogoholic.info/files/body.jpg</b>') repeat-y top center;}</span><br /><br />6. Find the code below and change the bold text with your image location:<br /><br /><span style="color:#0000ff;">#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('<b>http://blogoholic.info/files/head.jpg</b>') no-repeat top center; }</span><br /><br />7. Find the code below and change the bold text with your image location:<br /><br /><span style="color:#0000ff;">#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('<b>http://blogoholic.info/files/foot.jpg</b>') repeat-y top center; }</span><br /><br /><br />8. Now find the code below<br /><br /><span style="color:#0000ff;">#outer-wrapper { <span style="color:#0000ff;"><b>width: 898px</b></span>; margin: 0px auto 0; text-align: justify; } </span><br /><br />this code <b>width: 898px</b> it's the widht of your blog, change it according to your image.<br /><br /><span style="color:#0000ff;">#main { float: left; <b>width: 445px; </b> margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }</span><br /><br />This code <b>width: 445px; </b> is size/widht of <b>main</b>, you can change it.<br /><br /><span style="color:#0000ff;">#sidebar { float: right; <b>width: 153px; </b> padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }<br />#ads-wrapper {float: left; <b>width: 195px;</b> padding-left: 10px; word-wrap: break-word; overflow: hidden; }</span><br /><br />This code <b>width: 153px; </b> is widht of your right sidebar. and this code <b>width: 195px;</b> is widht your left sidebar. And this code <b>padding-right: 50px;</b> is gap of text on the right sidebar with right line. And this code <b>padding-left: 10px;</b> is gap of text on the left sidebar with left line.<br /><br /><span style="color:#0000ff;">#header { margin: 0; <b>height:196px; width:898; </b>color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }</span><br /><br />This code <b>height:196px; width:898; </b> is height and widht of your header, Change it according to your Header Image.<br /><br /><span style="color:#0000ff;">#footer { margin: 0; <b>width: 898px; height:80px;</b> padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') no-repeat top center; }</span><br /><br />This code <b>width: 898px; height:80px;</b> is widht and height of your <b>footer</b>.<br /><br />9. Try to modify and preview it until looks good.<br />10. If it looks good you can save it.<br /><br />GOOOD LUCK!!!!!!<br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com99tag:blogger.com,1999:blog-6418788182929981198.post-16729018030873887092008-02-09T16:15:00.000+07:002008-02-19T00:58:37.919+07:00How to Hide Your Post Date, Time and/or AuthorThere are some reason for bloger to hide Post date, time and author. May be they want to see their blog looks clear or everything. Now I will show you the trick to "hide your post date, time and or author". the mothods is very simple, just find the code that I pointed to you and delete it. You can chose which part want to delete, date only, time only, author only or it all. Ok, if you decided to do it lets begin the hack. <br /><span class="fullpost"><br />1. Login to blogger the go to <b>"Layout --> Edit HTML"</b><br />2. Click on the <b>"Download Full Template" </b> to back up your template first.<br />3. Check on the <b>"Expand Widget Templates"</b> check box.<br /><br /><b>Hide Post Date</b><br />find this code and delete it.<br /><span style="color: rgb(255, 0, 0);"><data:post.dateHeader/></span>.<br /><br /><b>Hide Post Time</b><br />find this code and delete it.<span style="color: rgb(255, 0, 0);"><br /> <span class='post-timestamp'><br /><b:if cond='data:top.showTimestamp'><br /><data:top.timestampLabel/><br /><b:if cond='data:post.url'><br /><a class='timestamp-link' expr:href='data:post.url' rel='bookmark' <br />title='permanent link'><abbr class='published' <br />expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><br /></b:if><br /></b:if><br /></span></span>.<br /><br /><b>Hide Post Author</b><br />find this code and delete it.<span style="color: rgb(255, 0, 0);"><br /> <span class='post-author vcard'><br /><b:if cond='data:top.showAuthor'><br /><data:top.authorLabel/><br /><span class='fn'><data:post.author/></span><br /></b:if><br /></span><br /></span>.<br /><br />5. Save your editting<br /><br />Good Luck ............<br /><br />Related Post :<br /><a href="http://trick-blog.blogspot.com/2008/01/change-post-date-become-calender-icon.html">Change Post Date Become Calender Icon</a><br /><br /><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com49tag:blogger.com,1999:blog-6418788182929981198.post-18037738070156297562008-02-06T11:15:00.001+07:002009-03-03T15:02:41.667+07:00Show or Hide Your Full Post in BloggerThis is the way to show or hide your full post on the main page of your blog. This is different from my old "<a href="http://trick-blog.blogspot.com/2008/01/how-to-create-read-more.html">Read More</a> " methods. If in old "<a href="http://trick-blog.blogspot.com/2008/01/how-to-create-read-more.html">Read More</a>" Methods it will show "Read More" link, then if you click the link you will load and go to another page that will show your full post/articel. But with my next methode below, if you click the link you will see your full post/articel in the same page and it no needs time to load, it only expand your full post. Do you want to try it? here is the trick:<br /><span class="fullpost"><br />1. Login to Blogger, Chose <b>"Layout --> Template --> Edit HTML </b><br />2. Click <b>"Download Full Templates"</b> link to back up your template.<br />3. Check on the <b>"Expand Template Wdiget"</b> Check Box.<br />4. Copy the code below and paste above this code </head><br /><p class="alert"><span style="color:blue;"> <script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/> </span></p><br />5. Then find this code <span style="color:red;"><div class='post-header-line-1'/> </span>.<br />6. If You found it you will see a code like this:<br /><p class="alert"><span style="color:red;"><div class='post-body entry-content'></span></p>or<br /><p class="alert"><span style="color:red;"><div class='post body'></span></p><br />7. The next step is change or replace the code (Only Number 6 code) to be like this:<br /><p class="alert"><span style="color:red;"><div class='post-body entry-content' </span><span style="color:blue;">expr:id='"post-" + data:post.id'</span>><br /><span style="color:blue;"><b:if cond='data:blog.pageType == "item"'></span></p><br />8. Under it you will see a code like this <span style="color:red;"><p><data:post.body/></p></span><br />9. Put the code below under it.<br /><p class="alert"><span style="color:blue;"><b:else/><br /><style>#fullpost {display:none;}</style><br /><p><data:post.body/></p><br /><span id='showlink'><br /><p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] <b>Show Full Post...</b></a></p><br /></span><br /><span id='hidelink' style='display:none'><br /><p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]<b>Hide Full Post...</b></a></p><br /></span><br /><script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script><br /></b:if> </span></p><br />10. So, the full code will like this :<br /><p class="alert"><span style="color:red;"><div class='post-header-line-1'/> </span><br /><span style="color:red;"><div class='post-body entry-content' </span><span style="color:blue;">expr:id='"post-" + data:post.id'</span>><br /><span style="color:blue;"><b:if cond='data:blog.pageType == "item"'></span><br /><span style="color:red;"><p><data:post.body/></p></span><br /><span style="color:blue;"><br /><b:else/><br /><style>#fullpost {display:none;}</style><br /><p><data:post.body/></p><br /><span id='showlink'><br /><p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] <b> Show Full Post...</b></a></p><br /></span><br /><span id='hidelink' style='display:none'><br /><p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]<b> Hide Full Post...</b></a></p><br /></span><br /><script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script><br /></b:if> </span></p><br />11. Save Your Editing.<br />12. Go to menu <b>"Setting --> Formatting"</b><br />13. On the bottom page you will see a box beside text <b>"Post Template"</b>. Copy the code below and paste in to the box<br /><p class="alert"><span style="color:blue;"><span id="fullpost"><br /><br /><br /></span></span></p><br />14. Save your setting.<br />15 If you want to post an articel place your part articel above this code <span style="color:blue;"><span id="fullpost"></span>. Then the remain or full post put between this code <span style="color:blue;"><span id="fullpost"></span> and this <span style="color:blue;"></span></span><br /><br />GOOD LUCK>>>>><br /></span>Kendhinhttp://www.blogger.com/profile/01879927515045474528noreply@blogger.com173