tag:blogger.com,1999:blog-18920296063344808082024-02-21T09:52:24.735-08:00Blog - How to TricksBlog tricks, How to Hack blog, blogger tutorial tips tricksmezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-1892029606334480808.post-5590591889006081812009-06-28T05:03:00.000-07:002009-06-28T05:36:37.350-07:00Text Effect For Blog<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - Often we need some text effect to write on our blog. Giving the effect of this article have a particular purpose, for example, to give special attention to some of the words in sentences, or to write down the mathematical calculations on your blog.<br /><br />There are some text effects that are easy and useful. Please try and hopefully useful!<br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Italic Text Effect</bold></h2><br /><i>Italic Text Effect</i><br />code:<br /><br /><i>Italic Text Effect</i></div><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Bold Text Effect</bold></h2><br /><b>Bold Text Effect</b><br />Code:<br /><br /><b>Bold Text Effect</b></div><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Streak Through Text Effect</bold></h2><br /><s>Streak through text Effect</s><br />Code:<br /><br /><s>Streak through text Effect</s></div><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Highlight Text Effect</bold></h2><br /><span style="background: rgb(240, 255, 0) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Highlight Text Effect</span><br />Code:<br /><br /><span style="background:#f0ff00">Highlight Text Effect</span></div><br /><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Underline Text Effect</bold></h2><br /><u>Underline Text Effect</u><br />Code:<br /><br /><u>Underline Text Effect</u></div><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Text with Border</bold></h2><br /><span style="border: 1px solid rgb(30, 0, 255);">Text with Border</span><br />Code:<br /><br /><span style="border: 1px solid #1e00ff">Text with Border</span></div><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Superscript Text Effect</bold></h2><br />Superscript <sup>Text</sup> Effect<br />Code:<br /><br />Superscript <sup>Text</sup> Effect<br /><br />With any posts superscript this effect, the note will be visible to rise slightly.</div><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Subscript Text Effect</bold></h2><br />Subscript <sub>Text</sub> Effect<br />Code:<br /><br />Subscript <sub>Text</sub> Effect<br /><br />With any posts subscript this effect, the note will be seen coming down a little.</div><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><h2><bold>Blink Text Effect</bold></h2><br /><blink>Blink Text Effect</blink><br />Code:<br /><br /><blink>Blink Text Effect</blink></div>mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com17tag:blogger.com,1999:blog-1892029606334480808.post-75456923543560102009-05-30T06:37:00.000-07:002018-07-21T11:13:57.244-07:00Read More with Post Title<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - we have been discussing about <a href="http://blog-howtotricks.blogspot.com/2009/04/how-to-create-read-more.html"><span style="font-weight: bold;">how to create read more</span></a> and <a href="http://blog-howtotricks.blogspot.com/2009/04/how-to-create-read-more-with-button.html"><span style="font-weight: bold;">how to create the read more button</span></a>.<br />
<br />
We can more edit this<span style="font-weight: bold;"> Read more</span> format, for example, create <span style="font-weight: bold;">read more with post title</span>.<br />
<br />
For example, you can <a href="http://easyblogtrick.blogspot.com/">see here</a>. By using this <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">blog tricks</span></a>, your <a href="http://blog-howtotricks.blogspot.com/">read more</a> format will not showing text 'read more', but showing your post title<br />
<br />
<span style="font-weight: bold;">How tricks for create read more with post title</span>?<br />
<br />
<span class="fullpost"><br /><span style="font-weight: bold;">Tricks</span> to <span style="font-weight: bold;">create read more with the post title</span> actually the same as the <span style="font-weight: bold;">trick to create read more</span>.<br /><br />Please read your post about the <a href="http://blog-howtotricks.blogspot.com/2009/04/how-to-create-read-more.html">tricks to create read more</a>.<br /><br />Then, just edit this code :<br /><br /></span><br />
<div style="background: rgb(255 , 255 , 255) url("https://i40.tinypic.com/2iaxx85.png") no-repeat scroll left top; border: 3px solid rgb(38 , 42 , 224); color: rgb(0 , 0 , 0); padding: 10px 10px 10px 50px; text-align: left;">
<span class="fullpost"><data:post.body/></span><br />
<span class="fullpost"><br /></span>
<span class="fullpost"><a expr:href='data:post.url'>Read More</a></span><br />
<span class="fullpost"><br /></span>
<span class="fullpost"></b:if></span></div>
<!--adsense--><span class="fullpost"><br /><br /><br />Change to be like this :<br /><br /><br /><div style="background: rgb(255 , 255 , 255) url("https://i40.tinypic.com/2iaxx85.png") no-repeat scroll left top; border: 3px solid rgb(38 , 42 , 224); color: rgb(0 , 0 , 0); padding: 10px 10px 10px 50px; text-align: left;">
<data:post.body/><br />
<br />
<a expr:href='data:post.url'><data:post.title/></a><br />
<br />
</b:if></div>
<br /><br /><br />After that, please Save Preview ago.<br /><br />Now the text '<a href="http://blog-howtotricks.blogspot.com/">Read More</a>' has changed the title of your post.<br /><br />You can also change to '<span style="color: rgb(51 , 102 , 255); font-style: italic; font-weight: bold;">Read More "your post title "</span> using the following code:<br /><br /><br /><div style="background: rgb(255 , 255 , 255) url("https://i40.tinypic.com/2iaxx85.png") no-repeat scroll left top; border: 3px solid rgb(38 , 42 , 224); color: rgb(0 , 0 , 0); padding: 10px 10px 10px 50px; text-align: left;">
<data:post.body/><br />
<br />
<a expr:href='data:post.url'>Read more <data:post.title/></a><br />
<br />
</b:if></div>
<br /><br /><br />This <span style="font-weight: bold;">tricks</span> to <span style="font-weight: bold;">make read more with post title</span> very easy, but the results will be very useful.<br /><br />Happy blogging!</span></div>
mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com4tag:blogger.com,1999:blog-1892029606334480808.post-5818788679801316552009-05-16T05:07:00.000-07:002009-05-16T05:26:04.306-07:00How To Create Text Area With Highlight Button<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - <a href="http://blog-howtotricks.blogspot.com/">Blog tricks</a> to <span style="font-weight: bold;">make the text area at blogger</span> has been discussed and learn <a href="http://blog-howtotricks.blogspot.com/2009/05/how-to-create-text-area.html">here</a>. We can modify the text so that <span style="font-weight: bold;">the area can more easily used by visitors</span>.<br /><br />We will learn <a style="font-style: italic;" href="http://blog-howtotricks.blogspot.com/">blog tricks how to make text area with highlight button</a>. This <a href="http://blog-howtotricks.blogspot.com/">blog tricks</a> to <span style="font-weight: bold;">make text area with highlight button</span> make it easier for visitors to copy words / code inside the <span style="font-weight: bold;">text area</span>.<br /><br />Let learn <span style="font-weight: bold;">blog tricks to make text area with the highlight button</span>.<br /><br />Simply copy the code below:<br /><br /><center><div><form name="copy"><div align="center"><input value="Highlight" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"><br /><textarea rows="1" cols="22" name="txt" ><span style="color: rgb(51, 51, 255);">Write your words/code here that will appear inside text area</span></textarea></div></form></div></center><br /><br />Paste in the place where you will place your text area.<br /><br />The result will be like this:<br /><br /><center><div><form name="copy"><div align="center"><input value="Highlight" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"><br /><textarea rows="1" cols="22" name="txt">Write your words/code here that will appear inside text area</textarea></div></form></div></center><br /><br />Try clicking on the button 'Highlight'<br /><br />So all the code / words inside will automatically selected, and visitors just copy it only.<br /><br />This <a style="font-style: italic;" href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">blog tricks to make text area with highlight button</span></a> is very simple and easy, but have a lot of function.<br /><br />Happy blogging ..mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com11tag:blogger.com,1999:blog-1892029606334480808.post-76945249600910891022009-05-07T07:11:00.000-07:002009-05-07T07:43:20.897-07:00Image Beside Post Title (2)<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - We have learn <span style="font-weight: bold;">blog tricks</span> <span style="font-weight: bold;">how to add a picture beside post title</span> <a href="http://blog-howtotricks.blogspot.com/2009/04/image-beside-post-title.html">here</a>. That trick is change post-title background to <a href="http://blog-howtotricks.blogspot.com"><span style="font-weight: bold;">add picture beside post title</span>.</a><br /><br />Tricks are easy to use to <span style="font-weight: bold;">add pictures at the right of the post title</span>. This trick now is edit post title code, and is suitable if you want to <span style="font-weight: bold;">add pictures at the left of the post title</span>.<br /><br /><span style="font-weight: bold;">How tricks to add images to the post title?</span><br /><br />Go to 'edit HTML'<br /><br />Click on the 'expand widget template'<br /><br />First, find the following code (easier to use ctrl + F)<br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><b:if cond='data:post.url'><br /><a expr:href='data:post.url'><data:post.title/></a><br /><b:else/><br /><data:post.title/></div><br />If you have found, copy the code below and paste the above code.<br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><img src='http://i43.tinypic.com/33tjz9c.png'/></div><br />Change with your image url.<br /><br />So that the entire code to be like this:<br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><img src='http://i43.tinypic.com/33tjz9c.png'/><br /><b:if cond='data:post.url'><br /><a expr:href='data:post.url'><data:post.title/></a><br /><b:else/><br /><data:post.title/></div><br />If it is finished, save and preview<br /><br />To get best result, please adjust your image with your post-title height.mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com5tag:blogger.com,1999:blog-1892029606334480808.post-28256256146853088542009-05-06T07:31:00.000-07:002009-05-06T08:04:17.742-07:00How To Put Ads Banner<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Ads Banner</span></a> is one of the promotion media. So also in the blogging world, <span style="font-weight: bold;">Ads banner</span> for the promotion is not foreign again for us.<br /><br />You can <span style="font-weight: bold;">install this banner ads at your blog</span>. Its can use for promote our own web, or to 'rent' to the people who want to promote their banner ads on our blog.<br /><br />Like on this blog, at the top of the blog, there are <span style="font-weight: bold;">banner ads</span>. <span style="font-weight: bold;">How to make and install banner ads in our blog?</span><br /><br /><span style="font-weight: bold;">Open 'Layout' - 'Edit HTML'</span><br /><br /><span style="font-weight: bold;">Copy code below:</span><br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);">#Banner-ads {<br /><br />margin:0px;<br /><br />padding: 5px;<br /><br />text-align: center;<br /><br />width : <span style="color: rgb(204, 0, 0);">960px</span>;<br /><br />}<br /><br />#Banner-ads img {<br /><br />margin: 7px 4px 4px 0px;<br />padding: 3px;<br />width : 100px;<br />height : 100px;<br />text-align: center;<br /><br />border: 1px solid #c0c0c0;<br /><br />}<br /><br />#Banner-ads img:hover {<br /><br />margin: 7px 4px 4px 0px;<br /><br />padding: 3px;<br /><br />text-align: center;<br /><br />border: 1px solid #333;<br /><br />}</div><br /><span style="font-weight: bold; color: rgb(204, 0, 0);">Red Code</span>, adjust with your outer-wrapper width.<br /><br />Paste the code above code <span style="font-weight: bold;">]]></b:skin></span><br /><br />After that, we will specify where the banner ads are placed.<br /><br /><span style="font-weight: bold; color: rgb(204, 0, 0);">For example</span>, in the case of this blog, <span style="font-weight: bold;">ads banner</span> will be placed above <span style="font-weight: bold; color: rgb(204, 0, 0);">posting widget (main-wrapper)</span>.<br /><br />Then copy the following code:<br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><div id='Banner-ads'><br /><br /><span style="color: rgb(204, 0, 0);"><a <span style="color: rgb(0, 0, 153);">hight='100'</span> href='http://easyblogtrick.blogspot.com/' <span style="color: rgb(0, 0, 153);">width='100'</span>><img alt='ads' border='0' src='http://123.com/banner.jpg'/></a></span><br /><br /></div></div><br />Then paste the above code <span style="font-weight: bold;"><div id=main-wrapper>.</span><br />Please Note :<br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><span style="color: rgb(204, 0, 0);">The Red code</span> is your ads banner image url. If you want put 8 ads banner images at your web, you must repeat your ads banner images url 8 times<br /><br />Value for high and wide of image (<span style="color: rgb(0, 0, 153);">Blue code</span>), you can also chage.</div><br />If you done, then save and preview. Now you have <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">ads banner at your blog</span></a>!<br /><br />Happy blogging!!mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com5tag:blogger.com,1999:blog-1892029606334480808.post-43145931787084859082009-05-02T08:51:00.000-07:002009-05-02T09:31:54.687-07:00How To Create Text Area<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Text area</span></a> has a function to place text or sentence in a particular area. <span style="font-weight: bold;">Text area</span> is usually used to place the code in the posting or element in your blog.<br /><br />If you are still confused what is the <span style="font-weight: bold;">text area</span>, I can give the following examples:<br /><br />I have a picture, such as this.<br /><br /><a href="http://blog-howtotricks.blogspot.com/" target="blank"><img src="http://i39.tinypic.com/2a8qioz.jpg" /></a><br /><br />The images have the code:<br /><br /><a href="http://blog-howtotricks.blogspot.com/" target="_blank"><img src="http://i39.tinypic.com/2a8qioz.jpg" /></a><br /><br />To keep your blog visitors can copy the image code you have, you can put it in the text area, for the example like this:<br /><br /><textarea cols="20" rows="4" name="textarea"><a href="http://blog-howtotricks.blogspot.com/" target="_blank"><img src="http://i39.tinypic.com/2a8qioz.jpg" /></a></textarea><br /><br /><span style="font-weight: bold;">How to create a text area</span>, the code is like this:<br /><br /><div style="border: 3px solid rgb(38, 42, 224); padding: 10px 10px 10px 50px; background: rgb(255, 255, 255) url(http://i40.tinypic.com/2iaxx85.png) no-repeat scroll left top; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><textarea cols="20" rows="4" name="textarea"><span style="color: rgb(204, 0, 0);"><a href="http://blog-howtotricks.blogspot.com/" target="_blank"><img src="http://i39.tinypic.com/2a8qioz.jpg" /></a></span></textarea></div><br /><br />You can change value for 'cols' and 'rows'. Change red text with your text or code that will appear at your text area.mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com4tag:blogger.com,1999:blog-1892029606334480808.post-54031288077525785762009-04-28T05:57:00.000-07:002009-04-28T06:09:27.930-07:00How to Remove Blogger Navbar<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - <span style="font-weight: bold;">Navigation Bar (navbar)</span> is a feature that has been provided by Blogspot, located on the top of our blog.<br /><br /><span style="font-weight: bold;">Blogger Navbar</span> will always appear at the top of the blog. However, if we do not want it, we can actually <a href="http://blog-howtotricks.blogspot.com/">remove the blogger navbar</a>.<br /><br />With following blog tricks that I will give, we can <span style="font-weight: bold;">remove the navbar blog</span>. <span style="font-weight: bold;">Navbar blog will not appear on our blogs</span>.<br /><br /><span style="font-weight: bold;"><a href="http://blog-howtotricks.blogspot.com/">how to remove the blogger navbar</a>?</span><br /><br />First, copy this code :<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;">#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}</div><br /><br />Just copy that code above code :<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;">body {</div><br /><br />Then save and preview.<br /><br />now, you will not see navbar at the top of the blog you blog.<br /><br />Happy blogging..:):)mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com0tag:blogger.com,1999:blog-1892029606334480808.post-43573663336055762672009-04-25T10:17:00.000-07:002009-04-26T06:04:43.085-07:00Image Beside Post Title<div id="result_box" dir="ltr"><a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - To make our blogs more interesting, we can <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">add a picture / image / icon beside post title</span></a>. Can <span style="font-weight: bold;">add an icon on the left of post title, or can also on the right of posttitle</span>.<br /><br />There are 2 <span style="font-weight: bold;">tricks to add a picture / image / icon beside of our post title</span>. Both of this <span style="font-weight: bold;">blog tricks</span> of course has advantages and disadvantages.<br /><br />2 tricks to it is add the code in the image posting our code title, while the second trick is to edit the post title background.<br /><br /><span style="font-weight: bold;">How to tricks</span>, i will give the first <span style="font-weight: bold;">blog tricks to add image beside post title</span>. It usually use for <span style="font-weight: bold;">add an image at right of our Post Title.</span><br /><br />Trick 1: Playing with background posting<br /><br />Results from this trick, you can see at <a href="http://easyblogtrick.blogspot.com">here</a>.<br /><br />This the tricks:<br /><br />Find the following code:<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;">.post-title or <span style="color: rgb(204, 0, 0);">.post h1</span></div><br /><br />Usually, different template, the code will be different. The point, this is the properties or settings for the title of our post.<br /><br />After you find it, you can see these codes following :<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;">.post-title {<br />margin: 0;<br />padding: 0;<br />font: Times New Roman;<br />font-size: 160%;<br />font-weight: bold;<br />line-height: 45px;<br />border-bottom:2px solid #f2f2f2;<br /><span style="color: rgb(204, 0, 0);">background: #000;</span><br />}</div><br />Note the code with red color<br /><br />Just add image's code at background code.<br /><br />Change the code like this (example) :<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><span style="color: rgb(204, 0, 0);">background: #000</span> url(<span style="color: rgb(0, 153, 0);">http://i43.tinypic.com/33tjz9c.png</span>) no-repeat right center ;</div><br /><br />You must add code 'no-repeat right center' , so that the image display can be organized.<br /><br />Code green, please replace with your image code. Then save, and preview.<br /><br />To 'line-height', adjust with the high of your image, that image can be seen perfectly.<br /><br />Now, you have a picture beside your post title. Enjoy it!<br /></div>mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com3tag:blogger.com,1999:blog-1892029606334480808.post-86741209003402481932009-04-20T06:42:00.000-07:002009-04-20T07:04:26.831-07:00How to Make Recent Comments<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog How to Tricks</span></a> - We have been discussed about <a href="http://blog-howtotricks.blogspot.com/">blog tricks</a> <span style="font-weight: bold;">how to make recent post</span>. You can read tricks to <a href="http://blog-howtotricks.blogspot.com/2009/04/how-to-create-recent-post.html">make a recent post here</a>.<br /><br />Now I will try to give <span style="font-weight: bold;"><a href="http://blog-howtotricks.blogspot.com/">blog tricks how to make recent comments</a> in your blog</span>.<br /><br />What is the <span style="font-weight: bold;">recent comments</span>? Function of <span style="font-weight: bold;">recent comments</span> widget is to display comments from your blog's visitors.<br /><br />So, when there is your visitor give comments on your post, it will appear on the <span style="font-weight: bold;">recent comments</span>.<br /><br /><span style="font-weight: bold;">How to make recent comments on your blog</span>? <a href="http://blog-howtotricks.blogspot.com/">Blog tricks to make recent comments</a> is easy. Lets we learn together ...<br /><br />First, go to menu 'Layout'.<br /><br />Select 'add gadgets' at widget that you want to add recent comments<br /><br />Select 'Feed'<br /><br />Then there have to fill in the box to 'Feed Url'<br /><br />Please fill in the box with:<br /><br />http://yourblog.blogspot.com/feeds/comments/default<br /><br />Replace 'yourblog' with your blog url. Once done, then click on 'Continue'.<br /><br />Next, you can set display for the <span style="font-weight: bold;">recent comments</span>. Please change the title, edit the amount of comment that will be displayed and you can also choose whether the date of comments and comment authors will be displayed or not.<br /><br />If you are done, click 'Save', then preview.mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com2tag:blogger.com,1999:blog-1892029606334480808.post-87594285745650898592009-04-19T08:50:00.000-07:002009-04-19T09:09:10.084-07:00How to Add Element Under Post Widget<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog-How to Tricks</span></a> - <span style="font-weight: bold;"><a href="http://blog-howtotricks.blogspot.com/">How to add element under post widget?</a> </span>Some of the widgets on your blog, can not be <span style="font-weight: bold;">added elements</span>. Main-wrapper (post widget), header, is an example for blog widget that can not be <span style="font-weight: bold;">added some elements/widget</span>.<br /><br />Not like the sidebar and footer, we can add the widget below.<br /><br />With a <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">blog tricks</span></a> below, we can <span style="font-weight: bold;">add elements/widgets</span> at some widget that in default we cannot add elements. For the example, main-wrapper/post widget (place the widgets we write a post)<br /><br /><span style="font-weight: bold;">How to add the element under the post widget?</span><br /><br />Note the following picture. There's no menu <span style="font-weight: bold;">'add widget'</span> :<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGMt-1kVv5EiShj5__CfwLdPtjpTloAbQoSQiHUfM_TID3hJ1jnnlsNhACecbs2C4Jm8oWu7uCZTUhg1JxU0OUqYYLhf_NdGfr-UHSIgphvvJkHZJopSR5SGffD8MlSfxtT4LzAMBf4ys/s1600-h/Blog+Post1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 137px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGMt-1kVv5EiShj5__CfwLdPtjpTloAbQoSQiHUfM_TID3hJ1jnnlsNhACecbs2C4Jm8oWu7uCZTUhg1JxU0OUqYYLhf_NdGfr-UHSIgphvvJkHZJopSR5SGffD8MlSfxtT4LzAMBf4ys/s200/Blog+Post1.jpg" alt="" id="BLOGGER_PHOTO_ID_5326433172371987538" border="0" /></a><br /><br />Go to Layout - Edit HTML<br /><br />Find this code:<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><div id="main-wrapper"><br /><b:section class="main" id="main" <span style="color: rgb(204, 0, 0);">showaddelement="no"</span>></div><br /><br />The red text, replace with:<br /><br /><span style="color: rgb(204, 0, 0); font-weight: bold;">preferred="yes"</span><br /><br />Then save. Go to <span style="font-weight: bold;">Layout</span> - <span style="font-weight: bold;">Page Element</span>. Now you can see, there is <span style="font-weight: bold;">'Add Widget'</span> menu available for you.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcx84N4SuQJrwpmBL4iJD8NqRwzYCcuyGAqx_PEwCB7Gltcxhyphenhyphenls6G4vFK8DmLBeKb2APTrzqki1ooIqVPxiTzXZEwdgOhMkCYXH5MCaR_3bHQI8U6_unMkU0swz4pePIsbk1-Fk-3Q4/s1600-h/Blog+Post2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 138px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcx84N4SuQJrwpmBL4iJD8NqRwzYCcuyGAqx_PEwCB7Gltcxhyphenhyphenls6G4vFK8DmLBeKb2APTrzqki1ooIqVPxiTzXZEwdgOhMkCYXH5MCaR_3bHQI8U6_unMkU0swz4pePIsbk1-Fk-3Q4/s200/Blog+Post2.jpg" alt="" id="BLOGGER_PHOTO_ID_5326433171460169090" border="0" /></a><br />This blog tricks can be apply for other widget that have code <span style="color: rgb(204, 0, 0);">showaddelement="no"</span>mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com4tag:blogger.com,1999:blog-1892029606334480808.post-28543713929963322902009-04-19T08:17:00.000-07:002009-04-19T08:31:19.495-07:00How to Create Recent Post<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog-How to Tricks</span></a> - <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Recent Post</span></a>, we have often see it. The function of <span style="font-weight: bold;">recent post</span> is to show some of our post.<br /><br />So, with the <span style="font-weight: bold;">recent post</span>, visitors can see some of our posts that have been created. Examples for the use of this <span style="font-weight: bold;">recent post</span> can be seen on <span style="font-weight: bold;">'Headline News'</span>, at the top of this blog.<br /><br /><span style="font-weight: bold;">How to create Recent Post? </span><br /><br />Copy the code below:<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><script style="" src="http://www.geocities.com/mezzaluna08@rocketmail.com/recentpost.txt"></script><script style="">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="<span style="color: rgb(204, 0, 0);">http://</span><span style="font-weight: bold; color: rgb(204, 0, 0);">YourBlog</span><span style="color: rgb(204, 0, 0);">.blogspot.com</span>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></div><br /><br />Change <span style="font-weight: bold;">YourBlog</span> be your blog Url.<br /><br />You may change :<br /><ul><li>Var numposts : Amount of post that will show at your Recent Post.</li><li>Var showpostdate : True if you want your post date appear.</li><li>Var Showpostsummary : True if you want your post summary appear.</li><li>var numchars : Numbers of character that appear at your post summary.</li></ul><br />Then paste that code to your widget where you want to place your recent post.<br /><br />Save then preview.mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com0tag:blogger.com,1999:blog-1892029606334480808.post-87499279709329874552009-04-19T07:34:00.000-07:002009-04-19T08:08:10.033-07:00How To Create Read More with Button<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog-How To Tricks</span></a> - We have been already discussed about <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Read More</span></a> and <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">blog tricks</span></a> to make <span style="font-weight: bold;">Read More</span> <a href="http://blog-howtotricks.blogspot.com/2009/04/how-to-create-read-more.html">here</a>.<br /><br />Now we will discuss about how to change the <span style="font-weight: bold;">Read More text link</span> into a <span style="font-weight: bold;">Read More Button</span>. For example, you can see <a href="http://easyblogtrick.blogspot.com/">here</a>.<br /><br /><span style="font-weight: bold;">How to make read more with button?</span><br /><br />To read more button to make this, you must use the <span style="font-weight: bold;">Read More</span> on your blog. If not yet, please read the tricks <a href="http://blog-howtotricks.blogspot.com/2009/04/how-to-create-read-more.html">here</a>.<br /><br />First, you must have an image for you <span style="font-weight: bold;">Read More button</span>. For example, an image like this:<br /><br /><span class="fullpost"><img src="http://i425.photobucket.com/albums/pp335/egobslank/th_RM4.jpg" /></span><br /><br />Go to <span style="font-weight: bold;">Layout</span> - <span style="font-weight: bold;">Edit HTML</span>. Click on <span style="font-weight: bold;">Expand Widget Templates</span>.<br /><br />Find the following code :<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><a expr:href='data:post.url'>Read More</a><br /><br /></b:if></div><br /><br />Replace <span style="font-weight: bold;">Read More</span> with the Read More Image Url you. Example:<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><expr:href="data:post.url"><img src='<span style="font-weight: bold; color: rgb(204, 0, 0);">http://i425.photobucket.com/albums/pp335/egobslank/RM4.jpg</span>' /></a><br /><br /></b:if></div><br /><br />Please replace <span style="font-weight: bold; color: rgb(204, 0, 0);">http://i425.photobucket.com/albums/pp335/egobslank/RM4.jpg</span> with the url of your image.<br /><br />Save, and then review. Now your Read More text link have been change to be button.mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com20tag:blogger.com,1999:blog-1892029606334480808.post-60828430073036661912009-04-19T06:27:00.000-07:002009-04-19T07:24:20.706-07:00How to Create Read More<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog-How to Tricks</span></a> - <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Read more</span></a> is one of the <a href="http://blog-howtotricks.blogspot.com/">blog tricks</a> that is very useful if you use it. With <span style="font-weight: bold;">Read More</span>, your post will not appear full on the Home Page your blog.<br /><br />This is mean, if you have a very long posting, with <span style="font-weight: bold;">Read More</span>, it will not appear full, but only appear in part.<br /><br /><span style="font-weight: bold;">Read More</span> function is you will have more space for your blog, and your blog more visible tidy.<br /><br /><span style="font-weight: bold;">How to create a Read More on blogspot?</span><br /><br />First, go to the <span style="font-weight: bold;">Layout</span> - <span style="font-weight: bold;">Edit HTML</span>. Click on <span style="font-weight: bold;">Expand Widget Templates</span>.<br /><br />Then find the following code (you can use ctrl+f) :<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><div class='post-body entry-content'><br /><br /><data:post.body/></div><br /><br />Then delete the code, <span style="font-weight: bold;">replace</span> with the following code:<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><div class='post-body entry-content'><br /><br /><br /><b:if cond='data:blog.pageType == "item"'><br /><br /><style>.fullpost{display:inline;}</style><br /><br /><p><data:post.body/></p><br /><br /><b:else/><br /><br /><style>.fullpost{display:none;}</style><br /><br /><br /><data:post.body/><br /><br /><br /><a expr:href='data:post.url'><span style="font-weight: bold;">Read More</span></a><br /><br /></b:if></div><br /><br />Save your template. You can change <span style="font-weight: bold;">Read More</span> with <span style="font-weight: bold;">Read Full</span>, or other<br /><br />The process to edit the HTML code for Read More is done.<br /><br />Next is when you writing a post.<br /><br />At the time of writing a post, you must add the following code :<br /><br /><span style="font-weight: bold; color: rgb(204, 0, 0);"><span class="fullpost"></span> and <span style="font-weight: bold; color: rgb(204, 0, 0);"></span></span> in your post (in the Edit HTML tab, not the Compose tab) with the following order:<br /><br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;">Post that appears on First/Home Page<br /><br /> <span style="font-weight: bold;"><span class="fullpost"></span><br /><br />Your post that hidden<br /> <span style="font-weight: bold;"><br /></span></span></div><br /><br /><br />For example, you write a post like this:<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><span style="color: rgb(204, 0, 0);">This is the first paragraph that will appear on your blog's front page. At the time you are on your blog page, only this part are show. </span><br /><br /><span style="font-weight: bold;"><span class="fullpost"></span><br /><span style="color: rgb(0, 153, 0);"><br />While this is </span><span style="color: rgb(0, 153, 0);">the continuation </span><span style="color: rgb(0, 153, 0);">paragraph of your posting. This paragraph is hidden. This paragraph will be visible if you click Read more link that has been available. </span><br /><span style="font-weight: bold;"><br /></span></span></div><br /><br />Then post that will appear on your blog front page is a paragraph with red text, and post with the green text will appear after you click the link Read More.<br /><br />Its very simple and easy. Enjoy it!mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com3tag:blogger.com,1999:blog-1892029606334480808.post-50399040626308815412009-04-18T11:40:00.000-07:002009-04-18T12:18:49.790-07:00How to remove numbers behind labels<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog-How to Tricks</span></a> - <span style="font-weight: bold;">Labels</span> that we use, display the labels name that we give to our post. At the end or the back label is written numbers, that is the amount of post in the same label.<br /><br />Sometimes, we may feel a little disturbed by the number and want to removed it. Of course, you can <span style="font-weight: bold;">remove numbers behind labels</span>.<br /><br /><span style="font-weight: bold;"><a href="http://blog-howtotricks.blogspot.com/">How to remove numbers behind labels</a>?<br /><br /></span>The tricks is very simple and easy :<br /><br />Click at 'Expand Template Widget'<br /><br />Just find these following code :<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; color: rgb(0, 0, 0);"><span dir='ltr'>(<data:label.count/>)</span></div><br /><br />When you find it, just remove these code.<br /><br />Then save your template, and review.<span style="font-weight: bold;"><br /><span style="font-weight: bold;"><br /></span></span><span>Now you never see numbers behind your labels :)</span><span style="font-weight: bold;"><span style="font-weight: bold;"><br /></span></span>mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com0tag:blogger.com,1999:blog-1892029606334480808.post-53745152126667928472009-04-18T10:54:00.000-07:002009-04-18T12:29:05.667-07:00How to Install Favicon<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog-How To Tricks</span></a> today will give you <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">blog tricks how to make a favicon</span></a>. <span style="font-weight: bold;">Favicon</span> is the image that appears on the left our url in your browser. With a <span style="font-weight: bold;">favicon</span>, our <span style="font-weight: bold;">blog</span> can be different.<br /><br /><span style="font-weight: bold;">How to make a favicon at your blog</span>, it's very easy.<br /><br />This is the <span style="font-weight: bold;">tricks</span> :<br /><br />First, you must have an image that want to use for your <span style="font-weight: bold;">favicon</span>.<br /><br />For the example, my image like this :<br /><br /><img src="http://i425.photobucket.com/albums/pp335/egobslank/Graphic1.jpg" /><br /><br />To make that image to be my favicon, find following code :<br /><br /><head><br /><br />Then copy code below :<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left; "><link href='<span style="color: rgb(204, 0, 0);">http://yourimage.jpg</span>' rel='shortcut icon'/></div><br /><br />Change 'yourimage.jpg' with your image url.<br /><br />Just paste below <head><br /><br />Then save template and review it.<br /><br />Now you can happy with a Favicon..:)mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com1tag:blogger.com,1999:blog-1892029606334480808.post-43394495436673518622009-04-18T09:50:00.000-07:002009-04-18T12:38:43.612-07:00How to Make 3 Columns Blog Footer<a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">Blog-How to Tricks</span></a> today will give <a href="http://blog-howtotricks.blogspot.com/"><span style="font-weight: bold;">blog tricks to make 3 columns footer</span></a>. <span style="font-weight: bold;">Footer</span> is located at the bottom of the blog. In the default blog template, footer only 1 column.<br /><br />For a variety of needs, sometimes we need a <span style="font-weight: bold;">blog with 3 columns footer</span>.<br /><br /><span style="font-weight: bold;">How to make footer to be 3 columns?</span><br /><br />First, select the 'Layout' - 'Page Element'.<br /><br />Then, please go to the menu 'Edit HTML'. We should do is find out how long the entire footer. Footer length generally equal to the length of outer. To find out, please friend search the following code:<br /><br />(Some template may have a different code).<br /><br />#outer-wrapper {<br />background-color: #473624;<br />border: 1px solid #332A24;<br />width: 9oopx;<br />margin: 0px auto;<br />padding: 15px;<br />text-align: center;<br />font: $ bodyFont;<br />}<br /><br />Value on the width is the same as the length of footer.<br /><br />Then copy code below :<br /><br /><p style="color: rgb(0, 0, 0);" class="MsoNormal"></p><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;">#footer2 {<br />clear: both;<br />float:left;<br />padding-right: 0;<br /><span style=""> </span>width: 296px;<br />background:#ffffff;<br /><span style=""> </span>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 />}<o:p></o:p><p></p> <p style="color: rgb(0, 0, 0);" class="MsoNormal"><o:p> </o:p></p> <p style="color: rgb(0, 0, 0);" class="MsoNormal">#footer3 {<br />float:right;<br />padding-left: 0;<br /><span style=""> </span>width: 296px;<br />background:#ffffff;<br /><span style=""> </span>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 />}<o:p></o:p></p> <p style="color: rgb(0, 0, 0);" class="MsoNormal"><o:p> </o:p></p> <p style="color: rgb(0, 0, 0);" class="MsoNormal">#footer4 {<br />float:right;<br />padding-left: 0;<br /><span style=""> </span>width: 296px;<br />background:#ffffff;<br /><span style=""> </span>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 />}</p></div><o:p></o:p><p></p>Paste above code #footer or #footer-wrapper<br /><br />Value on the 'width' is the value for the width of each column. Adjust the width of the columns at the original column.<br /><br />For example, if the width of original column is 900px. For new 3 columns, make width each column 295px.<br /><br />When finished, search the following code:<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><div id='footer-wrapper'></div><br /><br />Once you find it, copy the following code below, and paste above code <div id='footer-wrapper'>.<br /><br /><div style="border: 3px solid rgb(0, 0, 0); padding: 10px; background: rgb(235, 235, 235) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: left;"><div id='footer2'><br /><b:section class='footer' id='footer2'/><br /></ div><br /><br /><div id='footer3'><br /><b:section class='footer' id='footer3'/><br /></ div><br /><br /><div id='footer4'><br /><b:section class='footer' id='footer4'/><br /></ div></div><br /><br />Then save your template and preview. If the column can not well-organized, the value of the width maybe too large. Please adjust.<br /><br />Now, you have 1 original column and 3 new column.<br /><br />Enjoy it!mezzalunahttp://www.blogger.com/profile/02108438064793484651noreply@blogger.com6