How To Upload Templates To Blogspot Blogs Using Mobile Phones

The New blogger interface as it is, is generally not suitable for blogging via <a href="http://freebie-planet.blogspot.com/search/label/mobile%20phones" target="_blank"><span style="color:blue">Mobile Phones.</span></a><br />Due to this defect,it has become extremely 'not easy' to upload/edit templates via mobile,<a href="http://freebie-planet.blogspot.com/2012/10/how-to-edit-posts-in-new-blogger.html" target="_blank"><span style="color:blue"><b>edit posts via mobile</b></span></a>...amongst others.<p>But luckily,a solution has finally been gotten for you to <b>Upload your templates to blogs on blogspot via mobile</b><br />Here's how...<h2>Step On How To Upload Blogger Templates From Mobile Devices</h2><ol>Login to<a href="http://www.blogger.com" target="_blank"><span style="color:red">Blogger Dashboard</span></a></li><li>Select the blog you want to upload the template (if you have more than one) and click on <b>“Template”</b> just like in the image below.<img src="http://s20.postimage.org/5df7p3vnt/Shot0007.jpg"></li><li>Next,click on <b>“Backup / Restore”</b></li><img src="http://s20.postimage.org/7qx5g4a2x/Shot0008.jpg"><li>Scroll down a little to see an Upload Form.<br />Click on the <b>'Upload'</b> text area to choose which template to upload<br /><img src="http://s20.postimage.org/ctj2on8qx/Shot0010.jpg"><br /><span style="color:green">Using UCBrowser,you'll see four upload options.<br />Just Select <b>“Upload local file”</b><img src="http://s20.postimage.org/f5r2m8lc9/Shot0011.jpg"> and browse to the folder containing the desired template then finally click on it.</span></li><li>Now comes the normal issue people encounter while uploading template - <span style="color:red"><b>The ‘Upload’ button doesn't work.</b></span><br />But instead of clicking 'Upload' now,just locate the 'settings tool' below the text box(just as in the image below) and click on it<img src="http://s20.postimage.org/83t501hqh/Shot0012.jpg"></li><li>Wait for the page to finish loading.<img src="http://s20.postimage.org/yde7iu3nt/Shot0013.jpg"><br />Note: Do not exit the page.</li><li>Once the template finish uploading and refreshes the page,<b>you will find a new Upload Form at the extreme end of the page</b>.<br />Re-select the earlier uploaded template and now,<b>the new ‘Upload’ button will work just fine.</b><img src="http://s20.postimage.org/h1igb4zk9/Shot0014.jpg"></li><u><b>NOTE »</b><br />This trick(I call it) has been tested positive in Symbian S60 devices with a <b>UCBrowser</b>,but has proved abortive in a Java mobile phone,so you can give it a try on your device to see how well it goes.</ol>That's all.<br />You can now preview your blog to see the new template on it.<p>If you encountered any form(s) of difficulty/Error whilst trying this out,kindly leave a comment behind.<br />Likewise,if you have any contributions,suggestions or questions,please do not hesitate to leave your comments behind.</p>The New blogger interface as it is, is generally not suitable for blogging via <a href="http://freebie-planet.blogspot.com/search/label/mobile%20phones" target="_blank"><span style="color:blue">Mobile Phones.</span></a><br />Due to this defect,it has become extremely 'not easy' to upload/edit templates via mobile,<a href="http://freebie-planet.blogspot.com/2012/10/how-to-edit-posts-in-new-blogger.html" target="_blank"><span style="color:blue"><b>edit posts via mobile</b></span></a>...amongst others.<p>But luckily,a solution has finally been gotten for you to <b>Upload your templates to blogs on blogspot via mobile</b><br />Here's how...<h2>Step On How To Upload Blogger Templates From Mobile Devices</h2><ol>Login to<a href="http://www.blogger.com" target="_blank"><span style="color:red">Blogger Dashboard</span></a></li><li>Select the blog you want to upload the template (if you have more than one) and click on <b>“Template”</b> just like in the image below.<img src="http://s20.postimage.org/5df7p3vnt/Shot0007.jpg"></li><li>Next,click on <b>“Backup / Restore”</b></li><img src="http://s20.postimage.org/7qx5g4a2x/Shot0008.jpg"><li>Scroll down a little to see an Upload Form.<br />Click on the <b>'Upload'</b> text area to choose which template to upload<br /><img src="http://s20.postimage.org/ctj2on8qx/Shot0010.jpg"><br /><span style="color:green">Using UCBrowser,you'll see four upload options.<br />Just Select <b>“Upload local file”</b><img src="http://s20.postimage.org/f5r2m8lc9/Shot0011.jpg"> and browse to the folder containing the desired template then finally click on it.</span></li><li>Now comes the normal issue people encounter while uploading template - <span style="color:red"><b>The ‘Upload’ button doesn't work.</b></span><br />But instead of clicking 'Upload' now,just locate the 'settings tool' below the text box(just as in the image below) and click on it<img src="http://s20.postimage.org/83t501hqh/Shot0012.jpg"></li><li>Wait for the page to finish loading.<img src="http://s20.postimage.org/yde7iu3nt/Shot0013.jpg"><br />Note: Do not exit the page.</li><li>Once the template finish uploading and refreshes the page,<b>you will find a new Upload Form at the extreme end of the page</b>.<br />Re-select the earlier uploaded template and now,<b>the new ‘Upload’ button will work just fine.</b><img src="http://s20.postimage.org/h1igb4zk9/Shot0014.jpg"></li><u><b>NOTE »</b><br />This trick(I call it) has been tested positive in Symbian S60 devices with a <b>UCBrowser</b>,but has proved abortive in a Java mobile phone,so you can give it a try on your device to see how well it goes.</ol>That's all.<br />You can now preview your blog to see the new template on it.<p>If you encountered any form(s) of difficulty/Error whilst trying this out,kindly leave a comment behind.<br />Likewise,if you have any contributions,suggestions or questions,please do not hesitate to leave your comments behind.</p>

The New blogger interface as it is, is generally not suitable for blogging via Mobile Phones. Due to this defect,it has become extremely ...

Baca selengkapnya »

How To Manually Add A Read-More Button To Blogger Posts

Have you ever wished to display just a 'strap' of your blog post in the Homepage & Archieve pages?<br />Have you tried adding the <a href="http://freebie-planet.blogspot.com/2012/04/add-automatic-read-more-option-to-your.html" target="_blank"><span style="color:blue">Automatic Read More button to your blog and not working out?</span></a>,<br />Well,here's the solution.<p>You might have not imagined it to be this simple...,but it is!!,as all you need is a piece of code which has proven very potent & easy to remember.</p>So,to put an end to those awful extra-long texts in your blog's homepage,all you need do is <ul><li>Locate the exact point you would like for the button to appear in your <b>individual</b> posts and copy-paste this code there.</li><li><span style="color:red"><font size="3"><!-- more --></font></span></li></ul><p>NOTE » Always remember to add <b>a space</b> at the beginning and at the end of <b>“more”</b> in the code above.</p> Surprised ?,don't be!!<br />It's as simple as that.<p>Now,you can view your homepage to confirm it's working.<br />But,if you do not wish to add this code manually each time a post is to be published on your blog,then you can <a href="http://freebie-planet.blogspot.com/2012/04/add-automatic-read-more-option-to-your.html" target="_blank"><span style="color:green">Automatically do that here!</span></a><br />That's all.Please leave behind your contributions,questions or critics.<br />Thanks.</p>

Have you ever wished to display just a 'strap' of your blog post in the Homepage & Archieve pages? Have you tried adding the Aut...

Baca selengkapnya »

HOW TO ADD “WORD/CHARACTER COUNTER” TOOL TO BLOGS.

In one of our previous posts,we discussed a topic which is <a href="http://freebie-planet.blogspot.com/2012/10/add-html-encodedecode-tool-to-blogs.html" target="_blank"><span style="color:blue">“HOW TO ADD HTML ENCODE/DECODE-TOOL WIDGET TO BLOGS.”</span></a>.<br />And just as mentioned in that tutorial,the tool being made mentioned here was also provided by http://centricle.com.<p>Many at times,you might be asked to include a keyword while registering for a service online not 'More than or Below' a specified number of words and/or character.<br />This tool comes really handy in such a situation as you do not have to start counting every single letters manually.</p><p>Likewise as a blogger, you might want to count the number of characters in your post title as its often said that "Maintaining a below 60 is best".</p><p>Now,to add this tool to your blog,here's an easier way of doing that.</p><ol><li>Login to your <a href="http://blogger.com." target="_blank"><span style="color:red">Blogger dashboard.</span></a></li><li>Navigate to Layout » 'Add a Gadget' » 'HTML/JAVASCRIPT' and Copy-Paste the code below into the text box.</li><span style="color:green"><b>*Alternatively,you can create a page for it <a href="http://freebie-planet.blogspot.com/2012/05/create-static-pages-on-blogger.html" target="_blank"><span style="color:blue">[Learn how to create pages in Blogger.]</span></a></b></span><li><p style="border:1px solid #700000"><span style="background-color:#d8d8d8"><form action="http://centricle.com/tools/word+character-counter/" method="post" target="blank"> <fieldset> <label for="pad">String:</label> <textarea cols="60" rows="15" name="pad" id="pad"></textarea> <input class="submit" type="submit" name="countem" value="How Many?" /> </fieldset> </form></span></p></li><li><b>Save</b> the widget and that'll be all.</li></ol>HERE'S A LIVE DEMO OF THE WIDGET.<br /><form action="http://centricle.com/tools/word+character-counter/" method="post" target="blank"><fieldset><label for="pad">String:</label><textarea cols="60" rows="15" name="pad" id="pad">

That's all!!!

In one of our previous posts,we discussed a topic which is “HOW TO ADD HTML ENCODE/DECODE-TOOL WIDGET TO BLOGS.” . And just as mentioned in ...

Baca selengkapnya »

HOW TO EMBED “WINDOWS MEDIA PLAYER” IN BLOGS.

Writing a great article sometimes,isn't complete without embedding a video and/or an audio file to it.<p>It is highly required when you are posting a practical tech-related tutorial or most times on a news niche,whereby the file makes the post even more explanatory.</p><p>So,what if you have the link to a video,how do you embed it in a blog(post)?</p><p>In this tutorial,I'll be showing you two easy ways to embed the <b>Windows Media Player</b> in a blog to stream live videos & audio files for visitors to easily watch and listen to.</p><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false" autostart="true" width="350" height="250" loop="false" src="rtsp://v8.cache5.c.youtube.com/CjYLENy73wIaLQnd4te9PYx3RhMYDSANFEIJbXYtZ29vZ2xlSARSBXdhdGNoYJq32P6gmPjDUAw=/0/0/0/video.3gp" />[Video adapted from google.]<h2>Here's How...</h2><ol><li>The first way is by adding the media player as a gadget in the sidebar.<ul><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue">Blogger.</span></a></li><li>Navigate to <span style="color:red"><b>Layout » `Add a gadget` » HTML/JAVASCRIPT</b></span></li><li>Copy-Paste the code below and save the widget.</li></ul></li><li>The second method is by embedding the player in each blog-post.<br />This can be done by pasting the code below in each post.</li></ol><h3>Here's the Media-player's code...</h3><p style="border:1px solid #700000"><div style="background-color:#d8d8d8"><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false"<br />autostart="<span style="color:green">false</span>"<br />width="<span style="color:green">350</span>"<br />height="<span style="color:green">250</span>" loop="<span style="color:green">false</span>"<br />src="<span style="color:red"><b>VIDEO/AUDIO LINK</b></span>" /></div></p><textarea rows="3" col="20"><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false" autostart="false" width="350" height="250" loop="false" src="VIDEO/AUDIO LINK" />

CUSTOMIZATION.

Change the settings of this player to suit you (Optional).

Autostart→ Change this value to "True" if you want the video/audio to start streaming automatically upon visiting the post[Not recommended].
Width/Height→ Change these values respectively to suit you taste.
Loop→ Force the video/audio to loop constantly.

That's all.Just make sure you get a valid url.

Writing a great article sometimes,isn't complete without embedding a video and/or an audio file to it. It is highly required when you ar...

Baca selengkapnya »

HOW TO ADD HTML ENCODE/DECODE TOOL WIDGET TO BLOGS.

There are times whereby you might need to post an Html tag as plain text most especially for bloggers in “Blog niches”.<br />It is also needed when a visitor has to write some codes in the comment box.<p>Although,<a href="http://www.freebie-planet.blogspot.com/search/label/Blog%20hacks%20and%20tricks" target="_blank"><span style="color:blue">Blogger</span></a> has really made it easier to post “html” codes as plain text in the <a href="http://freebie-planet.blogspot.com/2012/10/how-to-edit-posts-in-new-blogger.html" target="_blank"><span style="color:blue">New blogger dashboard</span></a>,it still isn't helpful in situations when you need some other tags to function in a post.<br />So,to solve this,a tool has been provided by Centricle.com to make posting of codes easier and faster.<h2>Here's How It Works...</h2>When a html code is inputed in the textbox,the “Encode” button needs to be pressed,and the result when posted,is shown as live codes.<p>To integrate this widget in your blog,just Copy-Paste the following code snippet preferably into a <b>Page</b>[<a href="http://freebie-planet.blogspot.com/2012/05/create-static-pages-on-blogger.html" target="_blank"><span style="color:blue">Learn how to create pages on blogger.</span></a>]</p>Here's the code...<p style="border:1px solid #700000"><div style="background-color:#d8d8d8"><form action="http://centricle.com/tools/html-entities/" method="post" target="blank"><br /><fieldset><br /><input value="y" name="s" type="hidden"/> <label for="pad">Convert text to HTML entities and vice-versal:</label> <textarea id="pad" rows="15"cols="60" name="pad"></textarea> <input value="Encode" name="submit" type="submit"/> <input value="Decode" name="submit" type="submit"/><br /></fieldset><br /></form></div></p><h4>Live Demo</h4><form action="http://centricle.com/tools/html-entities/" method="post" target="blank"><fieldset><input value="y" name="s" type="hidden"/><label for="pad">Convert text to HTML entities and vice-versal:</label><textarea id="pad" rows="15"cols="60" name="pad">

That's all.If you need further information about the usage of this tool,do not hesitate to leave a comment behind.

There are times whereby you might need to post an Html tag as plain text most especially for bloggers in “Blog niches”. It is also needed wh...

Baca selengkapnya »

HOW TO ADD A “PRINT PAGE” BUTTON TO BLOGGER BLOGS.

Adding a “Print Page” button to a blog is another way of generating little traffic to it,as visitors are given the option to print an entire article without stress,and by so doing can boost the traffic of your blog through Word-of-mouth,online forums etc.<p>So,if you'd love to include this button on your blog,this post will show you how…</p><ol><li>Login to<a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger.</b></span></a></li><li>Navigate to <b><span style="color:blue">Templates » Edit HTML</span></b><span style="background-color:#ffffcc">[Always remember to backup your template.]</span></li><li>Check the box next to <span style="color:red"><b><br /><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="6"></head></font></span> by pressing <b>CTRL+F.</b></li><li>Next,Copy-Paste the code below directly <font size="4">above/before</font> it.</li><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><style type="text/css" media="print"><br />#noprint {display: none;}<br />// Hide unwanted elements<br />body {background:fff; color:000;}<br />// Black text on White background<br />a {text-decoration: underline; color:00f;}<br />//Underline Hyperlinks in blue}<br /></style></div></div><li>Once done,search(again) for <span style="color:red"><font size="6"><p><data:post.body/></p></font></span></li><li>When found, Copy-Paste the following code snippet directly <font size="4">below/after</font> it.</li><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><a href="javascript:window.print()"><span style="color:blue">Print Page</span></a></div></div><li>Preview the template to avoid errors and thereafter, Save it.</li></ol>That's all.

Adding a “Print Page” button to a blog is another way of generating little traffic to it,as visitors are given the option to print an entire...

Baca selengkapnya »

RANDOM BANNER WIDGET FOR BLOGGER BLOGS.

There are so many reasons you might want to add a banner to your blog site.<br />Adding a “Random banner widget” makes it better for any website.<p>It helps to manage space and is very useful in promoting affiliate links.<br />So in this tutorial,I'll be giving you an easy-to-use widget which can be modified to suit your taste.</p><h2>Steps On How To Add Random Banner To Blogs.</h2><ol><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue">Blogger</span></a>.</li><li>Navigate to <span style="color:red"><b>Layout » <span style="color:red">“Add a Gadget”</span> » HTML/JavaScript</b></span></li><li>Next,Copy - Paste the code snippet below<p style="border:1px solid #700000"><div style="background-color:#d8d8d8"><script language="JavaScript">images = new Array(3); images[0] = "<a href='<span style="color:red"><b>ADVERTISER'S URL</b></span>' rel='nofollow'><br /><img src='<span style="color:blue"><b>URL OF BANNER'S IMAGE</b></span>' border='0' height='60px' width='450px'> </a>";images[1] = "<a href = '<span style="color:red"><b>ADVERTISER'S URL</b></span>' rel='nofollow'> <br /><img src='<span style="color:blue"><b>URL OF BANNER'S IMAGE</b></span>' border='0' height='60px' width='450px'> </a>"; images[2] = "<a href='<span style="color:red"><b>ADVERTISER'S URL</b></span>' rel='nofollow'> <br /><img src='<span style="color:blue"><b>URL OF BANNER'S IMAGE</b></span>' border='0' height='60px' width='450px'><br /></a>";index = Math.floor(Math.random() * images.length); document.write(images[index]);<br /></script></div></p></li><li>Finally,SAVE the widget and preview your blog to ensure it's working.</li></ol>If you need further information about this widget,please leave your comments behind.<h4>Also Read</h4><a href="http://freebie-planet.blogspot.com/2012/09/how-to-add-advertise-with-us-widget-to.html" target="_blank"><span style="color:red">HOW TO ADD ADVERTISE WITH US WIDGET TO BLOGGER.</span></a>

There are so many reasons you might want to add a banner to your blog site. Adding a “Random banner widget” makes it better for any website....

Baca selengkapnya »

HOW TO EDIT POSTS IN THE “NEW BLOGGER INTERFACE”.

The fact that the “New blogger interface” has been around for a while now can't be disputed.<br />After so many notifications from Google,it was finally disabled late last-month despite mixed feelings about it.</p><p>Myself as a person,I didn't want to believe that the “Old interface” was gone forever,making it very difficult for mobile users to manage their blogs.</p><p>Of a fact,the New interface is not suitable for a beginner to play with because its just so complicated and hard to use. Infact,there were <a href="http://freebie-planet.blogspot.com/2012/09/how-to-recover-accidentally-deleted.html" target="_blank"><span style="color:blue">cases of accidentally deleted blogs</span></a>,and the inability to edit posts makes it worse.</p><p>But luckily,while carrying out some tests on maybe I could edit my posts,I came-up with a solution;Though,much more stressful than the way it was with the Old Dashboard.</p><h2>Here's How...</h2><img src="http://s20.postimage.org/6hpkcxma5/Shot0020.jpg">Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue">Blogger</span></a> »» <span style="color:blue">Posts</span>.<br />Next,navigate to the post you want to edit and get its url.<br />E.g In UCBrowser,click on “1” then scroll down to select “Page Info”(as seen in the image below)<img src="http://s20.postimage.org/lb47xou19/Shot0016.jpg"> and finally copy the address in “Link Address”.<img src="http://s20.postimage.org/t54tj31u5/Shot0019.jpg"><p>Once you've gotten the post link,it will look like this ↓<br /><span style="color:red"><b>http://www.blogger.com/blogger.g?blogID=5582915502189979689#editor/target=post;postID=372835895764398957;onPublishedMenu=publishedposts;onClosedMenu=publishedposts;postNum=4;src=postname</b></span></p>Now,delete the following from the address you get<br /><span style="color:red"><b>;onPublishedMenu=publishedposts;onClosedMenu=publishedposts;postNum=4;src=postname</b></span> and Copy-Paste it in your browser's address-bar.<h3><u><span style="color:red"><b>UPDATE!</b></span></u><span align="center"><b>(17-02-2013)</b></span></h3>I just discovered without deleting the preceding text from the derived url,i.e <span style="color:red">onPublishedMenu=allposts;onClosedMenu=allposts;postNum=50;src=postname</span>,the trick still works perfect.<br />So just get the post's url and paste in your browser's address bar.<p>That's all.<br />Kindly leave your comments,suggestions and questions behind!!!.</p>

The fact that the “New blogger interface” has been around for a while now can't be disputed. After so many notifications from Google,it ...

Baca selengkapnya »

AWESOME FACEBOOK LIKE,STUMBLE,RETWEET & DIGG COUNTER WIDGET FOR BLOGS.

Here's another cool Share-buttons widget for blogs. It's a 4-in-1 share widget with an awesome look and counters.<p>Well,I must confess,this is one of the most widely-used Social-media widget in the Blogosphere.</p><p>It includes the Facebook Like button,Digg Counter button,Stumble and Retweet buttons.</p><img alt="4in1 social share button.jpg" src="http://farm9.staticflickr.com/8455/8031099089_97525504ce_m.jpg"><h2>How To Add These Buttons To Blogger</h2>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger.</b></span></a><br />Go to <b><span style="color:red">Template</span></b><b> » </b><span style="color:red">Edit HTML</span> & Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b>.</span><p>Next,search for <span style="color:red"><font size="6"><data:post.body/></font></span> by hitting <b>CTRL+F.</b><br />Just add the following codes directly <font size="4">above/before</font> it.</p><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><b:if cond='data:blog.pageType ==&quot;item&quot;'> <table border='0'> <tr> <td><div style='padding-top:6px;'> <script type='text/javascript'> tweetmeme_style = &quot;compact&quot;; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> </div></td> <td> <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot;+ data:post.url'/> </td> <td><div style='margin-left:35px;'> <script type='text/javascript'> (function() { var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0]; s.type = &#39;text/javascript&#39;; s.async = true; s.src = &#39;http://widgets.digg.com/buttons.js&#39;; s1.parentNode.insertBefore(s, s1); })(); </script> <a class='DiggThisButton DiggCompact'/> </div></td> <td> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;+ data:post.url +&quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:35px; width:100px; height:20px;'/> </td> </tr> </table> </b:if><br /></div></div><p>That's it. Do not forget to share your testimony with others[If it worked or not].</p>

Here's another cool Share-buttons widget for blogs. It's a 4-in-1 share widget with an awesome look and counters. Well,I must confes...

Baca selengkapnya »

HOW TO RECOVER ACCIDENTALLY DELETED BLOGS.

<p>After Google disabled the `Old blogger interface`,there has been cases of accidentally deleted blogs including blog-posts for newbies who do not know how to use the New interface..</p><p>Luckily,<a href="http://www.blogger.com" target="_blank"><span style="color:blue">blogger</span></a> has given to its users the priviledge of retrieving a deleted blog.</p><h2>Here's How...</h2>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue">Blogger.</span></a>Now,in the list of blogs,you will notice a text stating the number of blogs displayed in your account at the bottom. E.g <b>“Displaying 2 of 3 blogs" with 1 hidden”</b><img alt="Undelete blogger blogs.jpg" src="http://farm9.staticflickr.com/8452/8029708280_73dc63406e_m.jpg"><p>Next,click on <b>“Show All”</b> to display all blogs including the deleted blog. Finally,click on <b>“Undelete This Blog”</b> and taadaa,your blog is restored.</p><p>That's all. Hope this post was handy.</p>

After Google disabled the `Old blogger interface`,there has been cases of accidentally deleted blogs including blog-posts for newbies who do...

Baca selengkapnya »

HOW TO ADD “ONLINE HTML CALCULATOR” TO BLOGS.

Here's a quick tool-script you can add to your website/blog to display online calculator.<p>Once a number or sign is clicked on,the page reloads with the option in the text area.</p>Here's a demo of this online application.<p><form name="Calc"> <center> <input disabled="disabled" type="text" style="font-weight: bolder; font-size: large;" name="Input"/> <input type="hidden" name="PHPSESSID" value="6be315796135a9d9627813b4af5fb2ad" /> </center><table> <tr> <th> <input type="button" name="one" value=" 1 " OnClick="Calc.Input.value += '1'"/> </th> <th> <input type="button" name="two" value=" 2 " OnCLick="Calc.Input.value += '2'"/> </th> <th> <input type="button" name="three" value=" 3 " OnClick="Calc.Input.value += '3'"/> </th> <th> <input type="button" name="plus" value=" + " OnClick="Calc.Input.value += '+ '"/> </th> </tr> <tr> <th> <input type="button" name="four" value=" 4 " OnClick="Calc.Input.value += '4'"/> </th> <th> <input type="button" name="five" value=" 5 " OnCLick="Calc.Input.value += '5'"/> </th> <th> <input type="button" name="six" value=" 6 " OnClick="Calc.Input.value += '6'"/> </th> <th> <input type="button" name="minus" value=" - " OnClick="Calc.Input.value += ' - '"/> </th> </tr> <tr> <th> <input type="button" name="seven" value=" 7 " OnClick="Calc.Input.value += '7'"/> </th> <th> <input type="button" name="eight" value=" 8 " OnCLick="Calc.Input.value += '8'"/> </th> <th> <input type="button" name="nine" value=" 9 " OnClick="Calc.Input.value += '9'"/> </th> <th> <input type="button" name="times" value=" * " OnClick="Calc.Input.value += '* '"/> </th> </tr> <tr> <th> <input type="button" name="zerozero" value="00" OnClick="Calc.Input.value += '00'"/> </th> <th> <input type="button" name="zero" value=" 0 " OnClick="Calc.Input.value += '0'"/> </th> <th> <input type="button" name="point" value=" . " OnClick="Calc.Input.value += '.'"/> </th> <th> <input type="button" name="div" value=" / " OnClick="Calc.Input.value += ' / '"/> </th> </tr> </table> <table> <tr> <th> <input type="button" name="clear" value=" Clear " OnClick="Calc.Input.value = ''"/> </th> <th> <input type="button" name="DoIt" value=" Ans " OnClick="Calc.Input.value = eval(Calc.Input.value)"/> </th></tr> <tr> Script by:<a href="http://freebie-planet.blogspot.com">SOLJAR2</a> </tr> </table></form></p>So,to add this application on your blog,Copy-Paste the codes in the box below into a Page,Post or gadget.<textarea rows="4" col="20" readonly="readonly"><form name="Calc"> <center> <input disabled="disabled" type="text" style="font-weight: bolder; font-size: large;" name="Input"/> <input type="hidden" name="PHPSESSID" value="6be315796135a9d9627813b4af5fb2ad" /> </center><table> <tr> <th> <input type="button" name="one" value=" 1 " OnClick="Calc.Input.value += '1'"/> </th> <th> <input type="button" name="two" value=" 2 " OnCLick="Calc.Input.value += '2'"/> </th> <th> <input type="button" name="three" value=" 3 " OnClick="Calc.Input.value += '3'"/> </th> <th> <input type="button" name="plus" value=" + " OnClick="Calc.Input.value += '+ '"/> </th> </tr> <tr> <th> <input type="button" name="four" value=" 4 " OnClick="Calc.Input.value += '4'"/> </th> <th> <input type="button" name="five" value=" 5 " OnCLick="Calc.Input.value += '5'"/> </th> <th> <input type="button" name="six" value=" 6 " OnClick="Calc.Input.value += '6'"/> </th> <th> <input type="button" name="minus" value=" - " OnClick="Calc.Input.value += ' - '"/> </th> </tr> <tr> <th> <input type="button" name="seven" value=" 7 " OnClick="Calc.Input.value += '7'"/> </th> <th> <input type="button" name="eight" value=" 8 " OnCLick="Calc.Input.value += '8'"/> </th> <th> <input type="button" name="nine" value=" 9 " OnClick="Calc.Input.value += '9'"/> </th> <th> <input type="button" name="times" value=" * " OnClick="Calc.Input.value += '* '"/> </th> </tr> <tr> <th> <input type="button" name="zerozero" value="00" OnClick="Calc.Input.value += '00'"/> </th> <th> <input type="button" name="zero" value=" 0 " OnClick="Calc.Input.value += '0'"/> </th> <th> <input type="button" name="point" value=" . " OnClick="Calc.Input.value += '.'"/> </th> <th> <input type="button" name="div" value=" / " OnClick="Calc.Input.value += ' / '"/> </th> </tr> </table> <table> <tr> <th> <input type="button" name="clear" value=" Clear " OnClick="Calc.Input.value = ''"/> </th> <th> <input type="button" name="DoIt" value=" Ans " OnClick="Calc.Input.value = eval(Calc.Input.value)"/> </th></tr> <tr> Script by: <a href="http://freebie-planet.blogspot.com">Soljar2.</a> </tr> </table></form>Hope you found it useful.

Here's a quick tool-script you can add to your website/blog to display online calculator. Once a number or sign is clicked on,the page r...

Baca selengkapnya »

HOW TO ADD “ADVERTISE WITH US” WIDGET TO BLOGS.

Nowadays,almost every blog has an “Advertise with us” widget in their sidebar. <img alt="Advertise with us.jpg" src="http://i44.tinypic.com/2v97vv9.jpg">The widgets in most cases,are in the dimension '125 by 125' which is the most commonly used in the blogosphere.<p>So,if you'd like to embed this widget in your blog,all you have to do is follow these easy & straightforward steps.</p><h2>Steps on how to add the advertise widget on your blog.</h2>Before we begin with this tutorial,make sure you have a page you can direct your patronizers to when the widget is being clicked on.<p>If you do not already have,create one[<a href="http://freebie-planet.blogspot.com/2012/05/create-static-pages-on-blogger.html" target="_blank"><span style="color:blue">Learn how to create a page</span></a>],and specify the amount you charge for each “ad-space”. Name the page “ADVERTISE” and publish it.</p><p>Once that's done,we are ready to start.</p><ol><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue">Blogger</span></a></li><li>Navigate to <b>Layout » Add a gadget</b> and select<b>Html/Javascript</b></li><li>Next,Copy-Paste the code below into the box →<p><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><center> <table border="0"><tr> <th width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/> </a> </th> <th width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </th> </tr> <tr> <td width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </td> <td width="125" height="125" align="center"> <a href="YOUR PAGE'S URL HERE" target="_blank"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></a> </td> </tr> </table> </center></div></div></p></li><li>Replace all <span style="color:red"><b>YOUR PAGE'S URL HERE</b></span> in the code snippet with the one you derivated after <a href="http://freebie-planet.blogspot.com/2012/05/create-static-pages-on-blogger.html" target="_blank"><span style="color:blue">creating your page.</span></a>Likewise,you can decide to increase/decrease the widget-image's size by replacing <span style="color:red"><b>'125'</b></span> in the code.</li><li>Finally, SAVE the widget.</li></ol>If you encountered any challenges,please let us know...

Nowadays,almost every blog has an “Advertise with us” widget in their sidebar. The widgets in most cases,are in the dimension '125 by 12...

Baca selengkapnya »

HOW TO REDUCE A BLOG'S PAGE-LOAD TIME.

A blog's load time is one of the major things that needs to be taken into consideration as a blogger.<p>You will agree with me that no one wants to stay long on a blog that takes so long to load.</p>In order to reduce a blog's load time due to massive image files on a web page,you might consider adding the 'jQuery Lazy Load' plugin.<p>With this plugin,all images on a webpage are delayed,thereby helping to reduce the server load and make long web-pages with images load faster.</p><h4>How do you add this plugin?</h4>It is actually very easy & takes the normal routine of editing a template.So,all you've got to do is follow the instructions below.<p>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue"><b>Blogger</b></span></a> » Go to <b><span style="color:red">Design/Layout</span></b><b> » </b><span style="color:red">Edit HTML.</span><br />Check the box next to <span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span>.<br />Next,locate <font size="5"></head></font> in your template by pressing <b>CTRL+F</b> and Copy-Paste the code below just <b>ABOVE/BEFORE</b> it.</p><p style="border:1px solid #700000"><div style="background-color:#d8d8d8"><script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /><script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/><br /><script charset='utf-8' type='text/javascript'><br />$(function() {<br />$(&quot;img&quot;).lazyload({placeholder :&quot;http://beautifulbloggerwidgets.googlecode.com/files/grey.gif&quot;,threshold : 200});<br />});<br /></script></div></p>Preview & Save your template.<br />Hope this helps!!!

A blog's load time is one of the major things that needs to be taken into consideration as a blogger. You will agree with me that no one...

Baca selengkapnya »

GRAB THIS AWESOME SOCIAL BOOKMARKING WIDGET WITH 3D EFFECT.

In our <a href="http://freebie-planet.blogspot.com/2012/09/animated-follow-me-widget-for-blogs.html" target="_blank"><span style="color:blue"><b>previous post</b></span></a>,we discussed on “How to Add Animated Follow-us widget to blogger”.<p>So likewise,in this tutorial we will be dealing with how to add animated social bookmarking widget with 3D effect.</p><img src="http://farm9.staticflickr.com/8450/8070352141_2f525047a0_t.jpg"><p>This widget is so cool that when hovered on,spins 360 degrees and spins back when released.<br />To add the widget on your blog,just follow the instructions below.</p><p>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger</b></span></a>,then go to <b><span style="color:red">Design</span></b><b><span style="color:blue"> » </span><span style="color:red">Page element</span></b> and select <span style="color:orange">'Add a gadget'</span>.<br />Now,locate "HTML/JAVASCRIPT" and select ADD.<br />Just copy/paste the code below and save the widget.</p><div style="border:1px solid #700000" background:#d8d8d8"><style><br />#social a:hover{background-color:transparent;opacity:0.7;}<br />#social img {-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}<br />#social img:hover { -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg);}</style><br /><center><br /><div id="social"><br /><!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="<span style="color:blue"><b>YOUR FEED URL HERE</b></span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_zP1rLPAMMbiMbyH5pSmeCK_W5c9DWZhl6qWQ-kwibb8m2U-j26p4J9lGH05CeTkmX_3zBBTCF79wQi5fjGmzQwrSVVBuQa7vK11SCXKfhv5mRCeSwQ_KpgQUlkt9cszFElvz-bPJ8j0/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><br /><!--End RssIcon--><br /><!--Start Email Rss Icon--><br /><a rel="nofollow" title="Get Free Updates Via Email" href="<span style="color:blue"><b>YOUR EMAIL RSS URL HERE</b></span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZWM1jRAyyJNrcUiFegtcNXrO64Mkv1omF1cykRS_y1mCFpbLhdV_mozp46RhjdNOILzgzvFeNdpxtq5YeVnzSJZI_9fc02jtXrMhKVvRyz7XBBMoXkgTXt6Gx1tDYobbP2keb7T4jZYN/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><br /><!--End Email Rss Icon--><br /><!--Start Facebook Icon--><br /><a rel="nofollow" title="Like Our Facebook Page" href="<span style="color:blue"><b>YOUR FACEBOOK PAGE URL HERE</b></span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIpoM94glXq1hyMvTLL6QrW8d8WbH1gO6NxpEluJ9XVXPIC8c4NZOKR4afl3NyFEcrPKgMYQJQuOafMfrXXxM1Y_MRRddSrqG7deoBOIqKUy9NpI9E9Quq7vDFqFE_bnIGexNcOuZx4oGu/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><br /><!--End Facebook Icon--><br /><!--Start Twitter Icon--><br /><a rel="nofollow" title="Follow Our Updates On Twitter" href="<span style="color:blue"><b>YOUR TWITTER URL HERE</b></span>" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJD29fgO20pRtVhUGZ96NZ9yB_E1Fbl3THzZ9bKf3r-MCuaNw6EFWxq2LLrWR_QR2th0kDy5YEko9iZ5jYqD1DM8Xb86pWzBKo1fRyINhO_IgxsJgI32k0UUhjfWOyspGv3Y_1ZpTdY0L/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><br /><!--End Twitter Icon--><br /><!--Start Google Icon--> <a title="Follow Us On Google " rel="nofollow" href="<span style="color:blue"><b>YOUR GOOGLE PLUS URL HERE</b></span>" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MUURk-pVu5Tn29-4Ub9LGM2g32JqwVAKail63i7AvgB_YoYQ0fwbsVQGxyPPzwgi2GEy-IIXmMItIZYO5y4erz_KreEK8TBcLY9u-NYP3ug0cIUfY2nzLir7UNVbmvz2w3OGwEJYWbWI/s1600/GOOGLE-PLUS-48x48.png"/></a><br /><!--End Google Icon--><br /><!--Start Pinterest Icon--><br /><a title="Follow Our Pins" rel="nofollow" href="<span style="color:blue"><b>YOUR PINTEREST URL HERE</b></span>" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVrfIX8neHFfDitreQ5S3eL504gkCy2XeukKPbAzKmHF-jVWnU5EafPi-suNvjeHYncVFoATxrgH42iYF5jTt_5TvhcMnI4WhTGTcq9Cajk_AF4jsM5cvBz0cOuXQYNq_A1hJybQrIsK-/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a><br /><!--EndPinterest Icon--></div><br /><!--Start Feed Count Button--> <a href="<span style="color:blue"><b>FEEDBURNER URL HERE</b></span>" target="_blank"><img alt="Feedburner" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><br /><!--End Feed Count Button--> </center></div><p><b>NOTE <br />If you don't have any of these urls,you can simply remove it for the time being.<br />Just delete all codes from where you see 'START' to the 'END' part.</b></p>

In our previous post ,we discussed on “How to Add Animated Follow-us widget to blogger”. So likewise,in this tutorial we will be dealing wit...

Baca selengkapnya »

ANIMATED FOLLOW-US WIDGET FOR BLOGS.

Have you ever wondered if it's really possible to have an animated widget?...<p>If yes,then I'm glad to introduce to you this animated 3D[three dimension] FOLLOW-US widget which can easily catch the attention of your blog visitors.</p><p>It was designed in form of a square which rises and changes from gray to a stupefying color when hovered upon.</p><p>To add this widget in your blog,here's what you need do →<br />Login to <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger</b></span></a>,then go to <b><span style="color:red">Design</span></b><b><span style="color:blue"> » </span><span style="color:red">Page element</span></b> and select <span style="color:orange">'Add a gadget'</span>.<br />Now,locate "HTML/JAVASCRIPT" and select ADD.<br />Just copy/paste the code below and save the widget.</p><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><style>.blogtoolz-flt-wdt{position:fixed; right:10px; top:36%;}<br />.blogtoolz-flt-wdtimg {float:right; clear:right; margin:1px; -webkit-transition:all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition: all .2s ease-in-out;}<br />.blogtoolz-flt-wdt img:hover{-moz-transform:scale(1.2) rotate(6deg);-webkit-transform: scale(1.2) rotate(6deg);-o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg);}</style><br /><div><br /><style><br />.BlogToolz1{display: block;width:64px;height: 64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_rollout_64x64.png') bottom; text-indent:-99999px;}<br />.BlogToolz1:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_color_64x64.png')bottom; height: 64px;}<br /></style><br /><a href="<span style="color:blue"><b>Your Facebook Link Here</b></span>"></a><br /><style><br />.BlogToolz2{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitterl_rollout_64x64.png') bottom;text-indent:-99999px;} .BlogToolz2:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/twitter_color_64x64.png') bottom; height: 64px;}<br /></style><br /><a href="<span style="color:blue"><b>Your Twitter Link Here</b></span>"></a><br /><style><br />.BlogToolz3{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_rollout_64x64.png') bottom;text-indent: -99999px;}<br />.BlogToolz3:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_color_64x64.png') bottom; height:64px;}<br /></style><br /><a href="<span style="color:blue"><b>Your Rss Feed Link Here</b></span>"></a><br /><style><br />.BlogToolz4{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_rollout_64x64.png')bottom;text-indent: -99999px;}<br />.BlogToolz4:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_color_64x64.png') bottom; height: 64px;}<br /></style><br /><a href="<span style="color:blue"><b>Your Google Plus Link Here</b></span>"></a> </div><br /><!-- Animation widget ends --></div></div><p>That's it.Just replace the necessary things there i.e the blue texts and save the widget.</p>

Have you ever wondered if it's really possible to have an animated widget?... If yes,then I'm glad to introduce to you this animated...

Baca selengkapnya »

HOW TO MOVE BLOGGER NAVIGATION BAR DOWN.

There are couple reasons you might want to keep the default blogger navigation-bar in your blog.<p>In a post sometimes ago,I gave a quick tip on <a href="http://freebie-planet.blogspot.com/2012/02/how-to-remove-navigation-bar-from-your.html" target="_blank"><span style="color:blue">how you can remove the bar from a blog.</span></a><br />But,if you think the bar is useful and you would like to retain it in your blog,you might consider moving it from its position down to the bottom of the blog.</p><h2>Here's How To...</h2>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger.</b></span></a><br />Go to <span style="color:red"><b>Design/Layout</b></span><span style="color:blue">»»</span><span style="color:red"><b>Edit HTML</b></span>.<span style="background-color:b0b0b0">[Backup your template in case something goes wrong.]</span><br /><br />Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="5">]]></b:skin></font></span> by pressing <b>CTRL+F</b><p>When found,just Copy-Paste the following piece of code directly <font size="3">ABOVE</font> it.</p><div style="border:1px solid #700000"><div style="background-color:#d8d8d8">#navbar-iframe {position: fixed;right:0px;bottom:0px;left:0px;}</div></div><p>Next,preview your blog to ensure the are no errors and thereafter,<font size="5">SAVE</font> your template.</p>That's all.You should see the bar at the bottom of the blog now!!!

There are couple reasons you might want to keep the default blogger navigation-bar in your blog. In a post sometimes ago,I gave a quick tip ...

Baca selengkapnya »

HIGHLIGHT AUTHOR COMMENTS IN BLOGGER.

Many are cases whereby the visitors of a blog go through the stress of viewing each comment on a post in order to locate the author's comment.<p>In order to save them that stress,it is very necessary to highlight your comments "as a blogger".</p><p>Apart from the stress being curbed in the process,it also helps to dignify a blog author's comment amongst several others.</p>Before we proceed with this tutorial,you might want to spare a little time to go through the following tutorials →<ol><li><a href="http://freebie-planet.blogspot.com/2012/05/add-reply-button-to-blogger-comments.html" target="_blank"><span style="color:blue">Add a Reply Button To Blogger Comments.</span></a></li><li><a href="http://freebie-planet.blogspot.com/2012/05/how-to-change-post-comment-text-in.html" target="_blank"><span style="color:blue">How To Change “Post A comment” Text in Blogger.</span></a></li><li><a href="http://freebie-planet.blogspot.com/2012/05/customize-blogger-comment-message.html" target="_blank"><span style="color:blue">How To Customize Blogger Comment-Message.</span></a><br /></li><li><a href="http://freebie-planet.blogspot.com/2012/04/adding-comments-policy-to-blogger-blogs.html" target="_blank"><span style="color:blue">Add a Comment Policy To Blogger.</span></a></li><li><a href="http://freebie-planet.blogspot.com/2012/04/numbered-comment-hack-for-blogger.html" target="_blank"><span style="color:blue">Numbered Comment Hack For Blogger Blogs.</span></a></li></ol><h2>How To Highlight Author Comments in Blogger.</h2>First,Login to <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger.</b></span></a><br />Go to <span style="color:red"><b>Design/Layout</b></span><span style="color:blue">→→</span><span style="color:red"><b>Edit HTML</b></span>.<span style="background-color:b0b0b0">[Backup your template in case something goes wrong.]</span><br /><br />Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for the following piece of code by pressing <b>CTRL+F</b><p><span style="color:red"><b><p><data:comment.body/></p></b></span></p><b>Note»<br />The above code will be seen twice,you have to use the second</b><p>Next,<font size="5">Replace</font> the code found above with the following snippet of code.</p><div style="border:1px solid #700000"><div style="background-color:#d8d8d8"><b:if cond='data:comment.author== data:post.author'><br /><span style="color:red"><b><p style='border:1px dotted#008e00; color:#00ff00;background:#d80000;width:auto;padding:4px;'></b></span><br /><data:comment.body/></p><br /><b:else/><br /><p><br /><data:comment.body/></p><br /></b:if></div></div><p>Having done that,preview your template then finally <b>save it.</b></p>To change the color,background,border style etc of the comment,simply play around with the css codes highlighted in the snippet above and that will be all.

Many are cases whereby the visitors of a blog go through the stress of viewing each comment on a post in order to locate the author's co...

Baca selengkapnya »

RECENT COMMENT WIDGET FOR BLOGS.

The default 'Recent comment widget' for blogger is something that doesn't work on most blogs {mine inclusive},and this made me explore Google in search of a valid recent comment gadget.<p>After searching for days,I finally came across one and decided to share it with those who might have thesame questions..<br /></p><p>Even though there are some html/javascripts to carry out this order,the usage of gadgets is much more viable,as too much of html/javascripts in a web page can slow it down.</p><p>This also has its own uniqueness,as you are able to decide whether you would show <b><span style="color:blue">post dates</span>,<span style="color:red">post title</span>,<span style="color:blue">decide the number of comments to display</span></b> etc.</p><p>To do this,just visit <a href="http://www.bloggerbuster.com/2007/08/create-your-oen-recent-comments-widgets.html" target="_blank"><span style="color:orange">this site</span></a>,and fill out the form appropriately.</p><p>The widget will then be automatically sent to the site you specify.</p><b><span style="color:red">Note:This widget does not include any backlink to the site I specified above,because I thought so and decided not to try it at first.</span></b><br /><br />Here's <a href="http://www.bloggerbuster.com/2007/08/create-your-oen-recent-comments-widgets.html" target="_blank">the site </a> again.<p>I'm sure this will save you a whole lot of stress to using javascripts which might sometimes include backlinks.</p>

The default 'Recent comment widget' for blogger is something that doesn't work on most blogs {mine inclusive},and this made me e...

Baca selengkapnya »

PAGE-LOAD TIMER SCRIPT FOR BLOGGER BLOGS.

Have you seen websites displaying web-page load time? Do you want this feature in your blog? If yes,then <b>Read-on.</b><p>In this post,I will be explaining how you can easily add this widget to your blog.</p><h2>How to add load timer to blogger blogs</h2>To add this widget to your blog,follow the steps below.<p><font size="5">Step 1:</font></p>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue"><b>Blogger</b></span></a> & go to <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span></b><span style="background-color:#ffffcc">[Always remember to backup your template.]</span> Check the box next to <span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b></span> and search for <span style="color:red"><font size="4"><head></font></span> by pressing <b>CTRL+F.</b> Once you get that,copy-paste the codes below directly <font size="4">after</font> it.<div style="border:1px solid #700000;width:130px"><div style="background-color:#d8d8d8"><!-- page load timer --> <script type='text/javascript'> var d = new Date(); var starttime = d.getTime(); //Get the start time </script></div></div><testarea rows="3" col="20"><!-- page load timer --> <script type='text/javascript'> var d = new Date(); var starttime = d.getTime(); //Get the start time </script></testarea><p><font size="5">Step 2:</font></p>Find <span style="color:red"><font size="4"></body></font></span> in your template and immediately <font size="4">before</font> that,copy-paste this code:<div style="border:1px solid #700000;width:130px"><div style="background-color:#d8d8d8"><!-- page load timer begins --> <script type='text/javascript'> var d2 = new Date(); var endtime = d2.getTime(); //Get the end time //Find the difference between the start and end times var totaltime = (endtime - starttime)/1000; //Round 2 decimal places var result = Math.round(totaltime*100)/100; //Output results to a&quot;P&quot; element document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in:&quot; result &quot; seconds&quot;; </script> <!-- page load timer ends --></div></div><testarea rows="3" col="20"><!-- page load timer begins --> <script type='text/javascript'> var d2 = new Date(); var endtime = d2.getTime(); //Get the end time //Find the difference between the start and end times var totaltime = (endtime - starttime)/1000; //Round 2 decimal places var result = Math.round(totaltime*100)/100; //Output results to a"P" element document.getElementById("loadtime").innerHTML = "Page loaded in:" result " seconds"; </script> <!-- page load timer ends --></testarea><br /><b>Preview</b> and <b>Save template.</b><p><font size="5">Step 3:</font></p>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger</b></span></a> » <b><span style="color:red">Design</span></b> »<span style="color:red"><b>Page element</span></b> and select <span style="color:orange">'Add a gadget'</span>. Next,scroll down till you find "HTML/JAVASCRIPT" and click on ADD. Now,copy-paste the following codes in it:<div style="border:1px solid #700000;width:130px"><div style="background-color:#d8d8d8"><!-- Widget portion --> <p id="loadtime">Your custom message goes here</p></div></div>Finally,save widget and view your blog to see the load-timer. If you are not satisfied with the <b>“Page loaded in:”</b> that displays together with the load-time,simply change it in “step 2” above.

Have you seen websites displaying web-page load time? Do you want this feature in your blog? If yes,then Read-on. In this post,I will be exp...

Baca selengkapnya »

HOW TO ADD FAVICON TO BLOGGER BLOGS.

A blog/site with a favicon is considered more professional than a site which has not,as it gives your website its own uniqueness. <p>This feature has been long known with Wordpress blogs,but in this tutorial,I will be guiding you on ́how to add a favicon on your blogger blog`.</p>Before I proceed,I will like to explain what a favicon is,for the benefit of newbie bloggers who might have not come across this tutorial before.<h3>What is a favicon?</h3>Favicon was extracted from the word “favorite-icon”. It's that tiny image you see behind every website-title on your browser. For a better understanding,look at the top left-hand side of your browser→behind this blog's title,you will notice a small image(<img src="picturestack.com/964/584/CTDfaviconw2G.ico">),right? That's what is called a favicon.<p>By default,all blogger blogs display blogspot's icon which we are about to change.</p><h4>Can't see an image?</h4>If you can't see any image,then it can only mean two things »<ol><li>Your browser's image is turned-off → Switch it on[Not all browsers].</li><li>Your browser does not support favicon.</li></ol>NOTE:-Not all browsers supports favicon e.g Internet Explorer 6.So,for the benefit of this tutorial,you should try using a higher version of Internet Explorer or some other browsers.<h2>HOW TO ADD A FAVICON.</h2>Below,I will be giving you the steps to take in order to add a favicon to your blog.<p><b>STEP 1→</b></p><ol><li>Visit <span style="color:red"><b>http://tools.dynamicdrive.com/favicon</b></span>(preferably in a new tab).</li><li>Click on the image-browse box to generate a favicon from any image in your <a href="http://www.freebie-planet.blogspot.com/search/label/pc" target="_blank"><span style="color:blue">computer</span>.</a></li><li>Next,upload your image and click on <b>“create icon”</b></li><li>You will see a download button,click on it to download the generated image icon to your <a href="http://www.freebie-planet.blogspot.com/search/label/pc" target="_blank"><span style="color:blue">pc</span>.</a></li></ol><h3>What to do with the generated icon?</h3>Upload your generated icon to an image hosting site to get the url. I know many people find it very hard to get a <font size="3">.ico</font> image hosting site,but after so many trials,I finally got one. So,to host your “ico” image file,<a href="http://picturestack.com/" target="_blank"><span style="color:red"><b>GO HERE</b>.</span></a><p><b>STEP 2→</b></p>Once you finish uploading your icon,copy the generated link and save it somewhere & follow the steps below.<ol><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:blue"><b>Blogger</b></span></a>» Go to <b><span style="color:red">Design/Layout</span></b><b> » </b><span style="color:red">Edit HTML.</span></li><li>Check the box next to <span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template</b>.</span></li><li>Search for <font size="4"><b:skin><![CDATA[/*</font> in the <head> section of your template by pressing <b>CTRL+F</b>.</li><li>Just before the code above,you'll see a similar code to the one below,so just replace it with the code snippets below→</li><li><p style="border:1px solid #700000"><div style="background-color:#d8d8d8"><link href='<span style="color:red">http://hostsite.faviconname.ico</span>' rel='shortcut icon'/> <link href='<span style="color:red">http://hostsite.faviconname.ico</span>' rel='icon'/></div></p>So,like I mentioned above,replace the red text with your generated icon url.</li><li>Finally,<font size="5">SAVE</font> your template & you are done.</li></ol><b>NOTE↓</b>Your uploaded icon will take some time before it starts to display in your blog.In some cases it might use days,so be patient.!!!

A blog/site with a favicon is considered more professional than a site which has not,as it gives your website its own uniqueness. This featu...

Baca selengkapnya »