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 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 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 »

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 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 »

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 »

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 »

CREATE CUSTOM PERMALINKS FOR ALL BLOGGER POSTS.

You might have noticed some blogs having shortened urls at the top/bottom of every post with a <b>“Share this post”</b> text. This is a very nice widget which can help increase your blog's traffic as visitors won't have to go through the stress of manually getting your posts url.<h2>How to add shortened url to your blog.</h2>In this tutorial,I 'll be making use of bit.ly i.e twitter's default service. <img alt="bitly.jpg" src="http://farm9.staticflickr.com/8162/7487342344_85b1c497a2_t.jpg">To begin,you will have to create an account with bit.ly to get your <a href="http://bit.ly/a/your_api_key/" target="_blank"><span style="color:red"><b>API KEY</b></span></a>.Once gotten,we can begin with the tut.<h2>STEP BY STEP TUTORIAL.</h2>Login to<a href="http://www.blogger.com" target="_blank"><span style="color:"><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="6"></head></font></span> by pressing <b>CTRL+F.</b>On getting that,Copy-Paste the code below directly<font size="4">above/before</font><p style="border:1px solid #700000"><span style="background-color:#d8d8d8"><script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=<span style="color:red"><b>USERNAME</b></span>&amp;apiKey=<span style="color:red"><b>YOURAPIKEY</b></span>"></script> <script type="text/javascript" charset="utf-8"> BitlyClient.addPageLoadEvent(function(){ BitlyCB.myShortenCallback = function(data) { // this is how to get a result of shortening a single url var result; for (var r in data.results) { result = data.results[r]; result['longUrl'] = r; break; } document.getElementById("shorturl").innerHTML = "Share this link: &lt;input type='text'value='" + result['shortUrl']+ "' name='bitlyurl'/&gt;"; } BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback'); }); </script></span></p>Replace <span style="color:red"><b>USERNAME</b></span> with the name you supplied while registering at bit.ly and also replace <span style="color:red"><b>YOURAPIKEY</b></span> with the <a href="http://bit.ly/a/your_api_key" target="_blank"><span style="color:red">key</span></a> assigned to your account.<p><font size="5">STEP 2»</font></p>Search for this line of code[CTRL+F]<p style="border:1px solid #700000"><span style="background-color:#d8d8d8"><div class='post-footer-linepost-footer-line-3'><span style="color:red"><b>PLACE SCRIPT HERE</b></span></div></span></p>Replace “PLACE SCRIPT HERE” in the code above with this»»<p style="border:1px solid #700000"><span style="background-color:#d8d8d8"><b:if cond='data:blog.pageType =="item"'><form id='shorturl'/></b:if></span></p>Now,<b>Preview & Save</b> your template.<p>You should now have a shortened url in all your blog posts. If you encountered any problem trying this,don't hesitate to leave a commen behind.

You might have noticed some blogs having shortened urls at the top/bottom of every post with a “Share this post” text. This is a very nice ...

Baca selengkapnya »

HOW TO MAKE TEXT MOVE/SCROLL IN BLOGGER.

Scrolling texts are used to catch visitors awareness to read an important information or announcement on a website.<br />It is often used by television stations to pass on information to the public,without stopping the ongoing programme.<p>I know some people will think this will be very hard to execute,but the truth is~It's very simple!!.</p><h2>HOW TO SCROLL TEXTS USING MARQUEE.</h2>I will be giving out the codes with examples below.<br /><b>NOTE:-</b>If the texts in the examples does not scroll,that means your browser doesn't support the scrolling feature.<h3>Scroll text from right to left</h3>This is the most popular and commonly used.It moves text from right side of a page to left.<textarea rows="3" cols="20"><marquee>Text to scroll.</marquee>Example:-
Scrolling text from right to left.

Text from left to right.

This will move the text in opposite direction of the default marquee scroll,i.e from left » right.<marquee direction="right">Text to scroll.</marquee>Example:-
This text will scroll from left to right.

Alternate marquee scroll.

The two examples above will scroll once until the page is refreshed.
Using the alternate marquee,the text will continue to move even if the page is not refreshed.<marquee behavior="alternate">Alternate scrolling text.</marquee>Example:-
Alternate scrolling text.

Up marquee scroll.

<marquee direction="up">Text to scroll up.</marquee>Example:-
Test scrolling upwards.

Down text scroll.

This scrolls the text downwards.<marquee direction="down">Text to scroll downwards.</marquee>Example:-
This is a text scrolling downwards.

Up/down marquee scrolling style.

As the heading implies,the text scrolls alternatively up and down.<marquee direction="up" behavior="alternate">Text to scroll up & down.</marquee>Example:-
This is a text alternately scrolling up & down.

Zig-Zag scrolling style.

This marquee code turns the text into a zig-zag scrolling form.You can change the direction[up] of the text.<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">Zig-zaggerd text.</marquee></marquee>Example:-
Text in a zig-zag format.

Alternate zig-zagging marquee.

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Alternate zig-zag text</marquee></marquee>Example:-
Text scrolling zig zag alternately.

MAKE YOUR SCROLLING TEXTS UNIQUE.

You can add different styles to your scrolling text,such as » text color,background color e.t.c.

ADD BACKGROUND+TEXT COLOR.

<font color="red"><marquee direction="left" style="background:yellow">Your text</marquee></font>Just use any color name or html hex color values,depending on the color of your site's background.
Example:-
Text with background color.

ADDING BORDER AROUND YOUR TEXT.

<marquee style="border:RED 2px SOLID">TEXT HERE</marquee>Example:-Text having borders.

SPEED UP SCROLLING TEXT.

You can also change the rate at which the scrolling text moves with this:scrollamount="5"NOTE:-The higher the scroll amount,the faster it becomes,and vice-versal.

Pause when mouse-hovered upon.

To make the scrolling text pause when hovered upon,use this:<marquee behavior="alternate" direction="left" bgcolor="#CC33FF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="5" scrolldelay="50">Your text goes here.</marquee>Example:- Pause this text by mouse hovering it.

With all this,you should be able to place awesome scrolling texts on your blog now.

For mobile users,this works only in default browser.Though,not everything functions perfectly.

Scrolling texts are used to catch visitors awareness to read an important information or announcement on a website. It is often used by tele...

Baca selengkapnya »

HOW TO SHOW/HIDE BLOGGER WIDGETS ON PARTICULAR PAGES.

When you add a new <a href="http://freebie-planet.blogspot.in/search/label/widget%20."><span style="color:blue">widget/gadget</span></a> on your blog,it automatically displays on your blog's homepage,<a href="http://freebie-planet.blogspot.in/2012/05/create-static-pages-on-blogger.html"><span style="color:blue">static pages</span></a>and post-pages.<br />Whereas,there are some widget which is not needed in particular areas of your blog.<br />E.G,Widgets like <a href="http://freebie-planet.blogspot.in/2012/04/related-posts-widget-for.html"><span style="color:blue">Recent comments,</span></a><a href="http://freebie-planet.blogspot.in/2012/04/related-posts-widget-for.html"><span style="color:blue">Related posts</span></a>,<a href="http://freebie-planet.blogspot.in/2012/04/recent-post-widget-for-blogger.html"><span style="color:blue">Recent posts</span></a>,<a href="http://freebie-planet.blogspot.in/2012/05/top-commentators-widget-for-blogger.html"><span style="color:blue">Top commentators</span></a>etc...which are not needed in <a href="http://freebie-planet.blogspot.in/2012/05/create-static-pages-on-blogger.html"><span style="color:blue">static pages</span></a> &sometimes homepage are displayed everywhere,thereby flooding your blog with extraneous <a href="http://freebie-planet.blogspot.in/search/label/widget%20."><span style="color:blue">widgets.</span></a><p>Fortunately,there are some conditional tags which will help solve this problem.<br />A Conditional tag consists of two sections of codes i.e,A <b:if+condition> and a matching end tag which is </b:if><h2>HOW TO DISPLAY/HIDE WIDGETS ON BLOGGER.</h2><ul><li>To display/hide widgets on specific pages,you have to know that particular <span style="color:red">widget's id</span> first[You can leave a comment below if you don't know how to get it.]</li><li>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger</b></span></a> » <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span>.</b></li><li>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 widget's Id.</p></li></ul><h2>APPLYING CONDITIONAL TAGS.</h2>On getting the widget's id,you will get something like this»<br /><b:widget id='HTML1' locked='false' title='' type='HTML'><br /><b:includable id='main'><br /><span style="background-color:#cc99cc"><span style="color:#99FFFF"><b>CONDITIONAL TAG GOES HERE</b></span></span> <!-- only display title if it's non-empty --><br /><b:if cond='data:title != &quot;&quot;'><br /><h2 class='title'><data:title/></h2><br /></b:if><br /><div class='widget-content'><br /><data:content/><br /></div><br /><br /><b:include name='quickedit'/><span style="background-color:#cc99cc"><span style="color:#99FFFF"><b>CLOSING TAG.</b></span></span><br /></b:includable><br /></b:widget><br /><p>Below are the conditional tags to replace with the ones in the widget above.</p><h3>TO SHOW A WIDGET ONLY IN HOMEPAGE.</h3><span style="background-color:#cc99cc"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><h3>SHOWING WIDGET ONLY IN LIST PAGES.</h3><span style="background-color:#FFCC00"><b:if cond="data:blog.pageType == "index""></span><h3>SHOW WIDGET ON ONLY POST PAGES.</h3><span style="background-color:#33CC99"><b:if cond='data:blog.pageType == "item"'></span><h3>SHOW WIDGET ON A SPECIFIC PAGE.</h3><span style="background-color:#FFFFCC"><b:if cond='data:blog.url == "URL OF PAGE"'></span><h3>SHOW WIDGET ON ARCHIVE PAGES ONLY.</h3><span style="background-color:#FF99CC"><b:if cond='data:blog.pageType == "archive"'></span><h3>SHOW WIDGET ONLY ON STATIC PAGES.</h3><span style="background-color:#00FFFF"><b:if cond='data:blog.pageType == "static_page"'></span><h3>SHOW WIDGET ON BOTH POST & STATIC PAGES.</h3><span style="background-color:#CC9999"><b:if cond='data:blog.url == data:post.url'></span><h3>SHOW WIDGET ON ONLY LABEL-SEARCH PAGES.</h3><span style="background-color:#FF9900"><b:if cond='data:blog.searchLabel'></span><p><b>NOTE:-</b>Whenever you use any of the codes above,do not forget to include the matching end tag,i.e <font size="7"></b:if></font></p><font size="3">ENCOUNTERED ANY DIFFICULTY?<br />DO NOT FORGET TO LEAVE A COMMENT BEHIND!!!</font>

When you add a new widget/gadget on your blog,it automatically displays on your blog's homepage, static pages and post-pages. Whereas,t...

Baca selengkapnya »

SOCIAL SHARING WIDGET FOR BLOGSPOT.

Previously,I wrote on how to add stylish<a href="http://www.freebie-planet.blogspot.com/2012/05/stylish-open-heart-bookmarking.html" target="_blank">open heart bookmarking widget</a> on blogger& today,I'll be giving some cool sharing widget to integrate on your blog.<p>This widget contains: facebook,twitter,digg,stumble linkedin and technorati buttons which will appear at the buttom of all your posts.<br />Sharing widget as we all know,is very useful on blogs to make it easier for your blog visitors to mention an article on their favourite social site,thereby increasing the number of traffic & obtaining favourable S.E.O on search engines.<h3>HOW TO ADD THE SHARE WIDGET ON YOUR BLOG.</h3>Login to <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger</b></span></a> » <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span>.</b><span style="background-color:#ffffcc">[Backup your template in case something goes wrong.]</span><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="6"><data:post.body/></font></span> by pressing <b>CTRL+F.</b><p>Now,copy/paste the code below just <font size="6">after</font> <font size="3"><data:post.body/></font>.</p><xmp><b:if cond='data:blog.pageType =="item"'><div style='border:1px solid#E2E2E2;width:100%;position:relative;margin-top:15px;'></div><div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:red;position:relative;top:12px;'><center>If you found this article useful,kindly take 5 seconds to share it!!!</center></div><table align='center' cellpadding='8' cellspacing='1' id='shareit'><tr><td><a class="external" expr:href=""http://www.facebook.com/share.php?u="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Share this on Facebook"><img alt="Share on facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcr6UxX9SzqciejIuORNjMvX-DxVVvFI64IoZLEj2i-ZYJZEelj60gRg8-k6Jtem4F9yHOE-RM3tHpSWgo6nT5X9YSclx9R_oSPSoHNIyYxxjtZfJHKpn0ov21pLcQJChO_4TEmZkjEbY/h120/1.PNG"/></a></td><td><a class="external" expr:href=""http://twitter.com/home?status=Reading:" + data:blog.title +" - " + data:post.url + " (@NAME)"" rel="nofollow" target="_blank" title="Tweet This!"><img alt="Tweet" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKOGFKaABik_Z8zDYV5MVlxNxTvXHv43y7C-5sYrp5FTcqS50ols2P36xmLtGPb6zFt_dzHSvlEcU8Xa5XSvFcr2KYcdWGSXnpe_NBwYagWkMPObtAkrlk7HM0YmaKVaUg_NK5G4wkqsQ/h120/6.PNG"/></a></td><td><a class="external" expr:href=""http://technorati.com/faves?add="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Share this on Technorati"><img alt="Technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinVzzqs3z02023jVFKLhgVkxnVatMHeYKHVPxub-nyDIvhhmKA1Vlyui5pbGpSaJuc4Tz3TgJjmklzQAlPTw5KLLQYK0J2sOpztgXPtW73RPGmpMlSTPZcwaw1RPdYG9MCXdmUpEP0a7A/h120/5.PNG"/></a></td><td><a class="external" expr:href=""http://del.icio.us/post?url="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Share this on del.icio.us"><img alt="Delicious!!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln56HHsTZpjTNcx5sP7aqhnOuFSa8o2L-E_zoaqEGn3F499xQebnbF2h4bYSxQCPvhcM4C_3X9e6YHfWKhyphenhyphencN_Gya-4P9EHhL116lKPfWzPRnHIATsmRdacGB3D2l0sfYCuDMipTdVT0/h120/3.PNG"/></a></td><td><a class="external" expr:href=""http://digg.com/submit?phase=2&url="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Digg this!"><img alt="digg it!!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYG1-SEQcA8ACYgBlLb1EblJOljtp1t-Uy2X6xoJW5hZ5unbuuqht82sdSKANl4pBDt1kswdZpIpzod5tNusZJs9aAhaidusXHL7xRe2FPaqdu_wZsnGjLMPcXkFaNp6_ez3obsfoy_tw/h120/2.PNG"/></a></td><td><a class="external" expr:href=""http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Share this on Linkedin"><img alt="linkedin" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmSF1zM7romuPs4MchJ9hLXVNQ2tmYhPZA9C-XZ5JhLZb0iaSbMQOVFwokQ0FdmutncEYGV9EArR3GHtsz6hOTkXO_QfWA5V9yGiztjaTiO9LYK4hxWPAI-4qa45rrD6pAO-6zYUBRDbQ/h120/4.PNG"/></a></td><td><a class="external" expr:href=""http://www.stumbleupon.com/submit?url="+ data:post.url +"&title=" + data:post.title" rel="nofollow" target="_blank" title="Stumble upon somethinggood? Share it on StumbleUpon"><img alt="Stumbleupon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXUNkChOJp7JwTKyb6cpuK6coFA6Cyob2Gym66euwWAt_WLXZRb8y2daZ_aZubJdOAcWGY1HpthnZ1nQVcuWXrAvdLsL2iyHOUooInrcLuP4WJsSjoLCMqJtrgYk2Z79400NjNt-F9YU/h120/7.PNG"/></a></td></tr></table></div></b:if></xmp>Next,search for <font size="6">]]></b:skin></font> and paste the codes below directly <font size="6">above/before</font> it.<xmp>#shareit{width:100%px;height:50px;border:0px solid red;position:relative;} #shareit tr td img{width:50px;height:50px;position:relative;}</xmp>DONE!!!.Just preview your blog & <font size="4">save</font> it if there are no errors.

Previously,I wrote on how to add stylish open heart bookmarking widget on blogger& today,I'll be giving some cool sharing widget to...

Baca selengkapnya »

HOW TO PLACE POST TITLE IN READ MORE LINK.

In a previous tutorial,I gave a blogger hack to <a href="http://freebie-planet.blogspot.com/2012/04/add-automatic-read-more-option-to-your.html" target="_blank"><span style="color:red"><b>add read-more link to your blog </b></span></a>and today,I'll be giving some customizations to make it more unique.<p>You might have seen some blogs having each-post-title after a read more/continue reading text.<br />Your blog visitors will also have the understanding of which post they want to read when they see the post title..<h3>HOW TO GO ABOUT THIS.</h3>As usual,login to <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger</b></span></a> » <b><span style="color:red">Design/Layout</span></b><b> » <span style="color:red">Edit HTML</span>.</b><span style="background-color:#ffffcc">[Backup your template in case something goes wrong.]</span><br />Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template<br /></b></span> and search for the code below by hitting <font size="3">CTL+F</font>.<xmp><b:if cond='data:post.hasJumpLink'><br /><div class='jump-link'><a expr:href="data:post.url +"#more"" expr:title="data:post.title"><data:post.jumpText/></a><br /></div></b:if></xmp>On getting that,just <font size="5">Replace</font> it with the code below <xmp><b:if cond='data:post.hasJumpLink'><br /><div class='jump-link'><a expr:href="data:post.url +"#more"" expr:title="data:post.title"><data:post.jumpText/> <data:post.title /></a><br /></div></b:if></xmp><textarea rows="3" cols="30"><b:if cond='data:post.hasJumpLink'><br /><div class='jump-link'><a expr:href='data:post.url +"#more"' expr:title='data:post.title'><data:post.jumpText/> <data:post.title /></a><br /></div></b:if>Preview your template to ensure there are no errors and save it.

In a previous tutorial,I gave a blogger hack to add read-more link to your blog and today,I'll be giving some customizations to make it ...

Baca selengkapnya »

STYLISH OPEN-HEART BOOKMARKING WIDGET/GADGET FOR BLOGSPOT.

This is one of the best bookmarking widget I've come across.<img align="left" alt="openheart.jpg" src="http://farm8.staticflickr.com/7075/7272912266_bb8bbdaf28_t.jpg"><br />The bookmarking widget is made in form of <b>heart</b>like seen in the image above,and whenever you mouse hover it,the heart slides open and several bookmarking buttons such as <b>facebook,twitter,linkedin,stumbleupon,pinterest</b> etc are revealed for your blog visitors to use.<p>You can also <a href="http://www.freebie-planet.blogspot.com/2012/04/add-floating-share-box-to-your-blog.html" target="_blank"><span style="color:red"><b>visit this post</b></span></a> for another method of adding bookmarking widget in floating form.</p><h3>STEPS ON HOW TO ADD THE WIDGET ON YOUR BLOG.</h3>First,login to your <a href="http://www.blogger.com" target="_blank"><span style="color:"><b>Blogger Account.</b></span></a><br />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">[Backup your template in case something goes wrong.]</span><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="6"></head></font></span> by pressing <b>CTRL+F.</b><p>On getting that,just copy/paste the code below,directly <font size="4">above/before</font> it.</p><p style="background-color:#ffffcc"><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><br /><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><br /><script type='text/javascript'>stLight.options({publisher:&quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script><br /><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/></p>Having done that,the next step is to search for <font size="6"></body></font>[CTRL+F]<br />Now,copy/paste the code below directly <font size="7">above/before</font></body><p style="background-color:#ffffcc"><div style='<span style="background-color:white">position:fixed; bottom:2%;left:2%;</span>'><br /><div class='shareEgg' id='shareThisShareHeart'/><br /></div><br /><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://freebie-planet.blogspot.com/2012/05/stylish-open-heart-bookmarking.html" target="_blank"><span style="color:red">[GET THIS]</span></a></p>Just <b>preview and save</b> your template.<br /><span style="color:red">NOTE:-THIS WIDGET HAS BEEN SET TO BE DISPLAYED AT THE BOTTOM-CORNER OF YOUR BLOG.TO CHANGE IT,PLAY AROUND WITH THE NUMBERS HAVING WHITE BACKGROUND ABOVE TILL YOU'RE SATISFIED.</span><br />That's all.

This is one of the best bookmarking widget I've come across. The bookmarking widget is made in form of heart like seen in the image abov...

Baca selengkapnya »

CSS RELATED POST WIDGET.

<img align="left" alt="relatedposts.jpg" src="http://farm9.staticflickr.com/8003/7270510484_49bffe3d8a_t.jpg">In one of my <a href="http://freebie-planet.blogspot.com/2012/04/related-posts-widget-for.html" target="_blank"><span style="color:red"><b>previous posts,</b></span></a>I gave out a site to add the "Related post widget" to your blog,but for those who might prefer to embed the codes into their template,this is a nice way of doing that.<h4>HOW TO ADD THE WIDGET ON YOUR BLOG.</h4>First,login to your <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger Account.</b></span></a><br />Go to <b><span style="color:red">Design/Layout</span></b><b>»»<span style="color:red">Edit HTML</span></b>.<span style="background-color:#FFCC99">[Backup your template in case something goes wrong.]</span><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:#ccff00"><span style="background-color:#cccccc"><b></head></b></span></span>by pressing <b>CTRL+F.</b><p>On getting that,just copy/paste the code below directly <font size="3">before/above</font> it.</p><p style="background-color:#FF9966"><!--Related Posts with thumbnails Start--><br /><!-- remove --><b:if cond='data:blog.pageType ==&quot;item&quot;'><br /><style type="text/css"><br />#related-posts {<br />float:center;<br />text-transform:none;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;<br />}<br />#related-posts h2{<br />font-size: 1.6em;<br />font-weight: bold;<br />color: black;<br />font-family: Georgia,&#8220;Times New Roman&#8221;, Times, serif;<br />margin-bottom: 0.75em;<br />margin-top: 0em;<br />padding-top: 0em;<br />}<br />#related-posts a{<br />color:black;<br />}<br />#related-posts a:hover{<br />color:black;<br />}<br />#related-posts a:hover {<br />background-color:#d4eaf2;<br />}<br /></style><br /><script type='text/javascript'><br />var defaultnoimage="<span style="color:red">http://farm8.staticflickr.com/7104/7267555714_285261d73d_t.jpg</span>";<br />var maxresults=<span style="color:#ccff33">5</span>;<br />var splittercolor="#d4eaf2";<br />var relatedpoststitle="Related Posts";<br /></script><br /><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/><br /><!-- remove --></b:if><br /><!--Related Posts with thumbnails End--></p><p><big>NOTE»</big><br />When a post has no image,a default image is shown.To change the picture,get the address of an image,then change it with the url in <span style="color:red">red</span> above.<br />Likewise,to change number of posts,replace 5 in the code above.</p><big>Next</big>,search for either of these codes<br /><p style="background-color:#FF9933"><div class='post-footer-line post-footer-line-1'></p><big>Can't find that?</big>,search for this instead.<p style="background-color:#FF9933"><p class='post-footer-line post-footer-line-1'></p>On getting any of those two,copy/paste the code below directly <font size="4">after</font> it.<p style="background-color:#FF9933"><!-- Related Posts with Thumbnails Start--><br /><!-- remove --> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast!= &quot;true&quot;'><br /></b:if><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name+ &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp; max-results=<span style="color:#ccff33">5</span>&quot;' type='text/javascript'/></b:loop><br /><script type='text/javascript'><br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br /></script><br /></div><div style='clear:both'/><br /><!-- remove --> </b:if><br /><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /><a href='http://freebie-planet.blogspot.com'>Home of internet freebies.</a><br /></b:if></b:if><br /><!-- Related Posts with Thumbnails End--></p>CHANGE 5 ABOVE TO THE NUMBER OF POSTS YOU WANT SHOWN.<p>Now most importantly,save your template,and that's it.<br />Adapted from HELPLOGGER!!!.

In one of my previous posts, I gave out a site to add the "Related post widget" to your blog,but for those who might prefer to emb...

Baca selengkapnya »

GOOGLE +1 BUTTON FOR BLOGS.

As we all know,'google +1' button is one of the essential buttons a blog should have to become more popular.<img align="left" alt="google +1" src="http://searchengineland.com/figz/wp-content/seloads/2011/03/Picture-92-300x209.png"><p>This button is similar to facebook & twitter send buttons.</p><h3>HOW TO ADD THE BUTTON TO YOUR BLOG.</h3>To add this button,just follow the steps below carefully.<p>First,login to your <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger Account.</b></span></a><br />Go to <b><span style="color:red">Design/Layout</span></b><b><span style="color:blue"> →→ </span><span style="color:red">Edit HTML</span></b>.<span style="background-color:b0b0b0">[Backup your template in case something goes wrong.]</span><br />Check the box next to<br /><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="6"></head></font></span> by pressing <b>CTRL+F.</b></p>On getting that,copy/paste the code below directly <span style="color:red"><font size="4">ABOVE/BEFORE</font></span> it.<p><script type="text/javascript" src="http://apis.google.com/js/plusone.js">{lang: 'en-US'} </script></p>Now,to add this button directly below your <b>post title</b>,search for <span style="color:red"><big><data:post.body></big></span> and paste the codes below directly <b>above/before</b> <data:post.body>,but if you would like it after your blog posts,then paste the code <b>below/after</b> <data:post.body>.<h6>HERE'S THE CODE</h6><p style="background-color:#c08080"><div style='float:left'><g:plusone size="<span style="color:red">standard</span>" expr:href="data:post.url"/></div></p>You can also change the size of the button above by changing the text in red to either <b>small,medium or tall</b>.<br />All that is left for you to do now is preview your blog to ensure there are no errors,and afterwards <big>SAVE YOUR TEMPLATE.</big>

As we all know,'google +1' button is one of the essential buttons a blog should have to become more popular. This button is similar ...

Baca selengkapnya »

ADD AN IMAGE/ICON/ANIMATION BEFORE BLOG POST TITLE.

<img align="left" src="http://www.tutoriallounge.com/wp-content/themes/tutlou/thumb.php?src=http://www.tutoriallounge.com/wp-content/woo_uploads/27-Create-Catchy-Blog-Post-Titles-for-Maximum-Readership-530.jpg&h=530&w=530&zc=1&q=90">To begin with this tutorial,you should have your image's address ready by searching for some cool images on the net.<br />You might also like to use an image on your desktop or phone,but don't know how to go about this,all you have to do is sign up to some image hosting websites on the net,then upload your image & get the link.<br /><dl><dt>Here are some nice image hosting websites</dt><dd><a href="http://www.flickr.com" target="_blank"><img align="left" alt="FLICKR!!!" src="http://l.yimg.com/g/images/iphone/en-us/flickr-from-yahoo-logo.png"></a></dd> <dd><a href="http://imageshack.us/" target="_blank"><img align="left" alt="IMAGE SHACK" src="http://farm3.staticflickr.com/2240/2072182007_22961ab2c0_m.jpg"></a></dd> <dd><a href="http://www.freeimagehosting.net/" target="_blank"><span style="color:red"><b>IMAGE HOST</b></span></a></dd> <dd><a href="http://postimage.org" target="_blank"><span style="color:red"><b>POST IMAGE</b></span></a></dd><dd><a href="http://tinypic.com/" target="_blank"><img align="left" alt="TINY PIC." src="http://static.tinypic.com/i/tinypic-branding.gif"></a></dd> <dd><a href="http://photobucket.com/" target="_blank"><span style="color:red"><b>PHOTO BUCKET</b></span></a></dd></dl>Just a few to mention.Like I said above,register to any of these sites>>upload your pics and get the link/url usually in .jpg , .png , &.gif formats.<h6><big>Back to the main issue.</big></h6>On getting the link to your image,paste it in the html code below,and save it somewhere.<br /><span style="background-color:#E0E0E0"><img src="<span style="color:#cc3300"><b>YOUR-IMAGE-URL-HERE</b></span>" style="border-width:0px"/></span><h3>HOW TO IMPLEMENT THIS</h3>Login to your <a href="http://www.blogger.com" target="_blank"><span style="color:red"><b>Blogger Account</b></span></a> and go to <b><span style="color:red">Design</span></b><b><span style="color:blue"> >> </span><span style="color:red">Edit HTML.</span></b>[<span style="background-color:ccffff">Backup your template in case something goes wrong.</span>] and <br />Check the box next to<br /><span style="color:red"><b><input type="checkbox" name="" value="" checked>Expand Widget Template.</b></span><p>Search for <font size="6"><span style="color:red"><b:if cond='data:post.url'></span></font> in your template,by pressing <b>CTRL+F</b>.<br />On getting that code,just place the html you saved above directly <b>BELOW/AFTER</b> to get something like this <br><b:if cond='data:post.url'> <img src="YOUR-IMAGE-URL-HERE" style="border-width:0px"/></p>Preview your blog to ensure there are no errors,then <big>Save your template.</big><span style="color:orange">NOTE:-In case you couldn't get a small image to use,you can add the image-size-command by simply putting a <font size="7">WIDTH="50" HEIGHT="50"</font> before the closing tag of the image above.Change the "50" above to anything.</span>

To begin with this tutorial,you should have your image's address ready by searching for some cool images on the net. You might also like...

Baca selengkapnya »