3 How To Upload Templates To Blogspot Blogs Using Mobile Phones

The New blogger interface as it is, is generally not suitable for blogging via Mobile Phones.
Due to this defect,it has become extremely 'not easy' to upload/edit templates via mobile,edit posts via mobile...amongst others.

But luckily,a solution has finally been gotten for you to Upload your templates to blogs on blogspot via mobile
Here's how...

Step On How To Upload Blogger Templates From Mobile Devices

Login toBlogger Dashboard
1. Select the blog you want to upload the template (if you have more than one) and click on “Template” just like in the image below.
2. Next,click on “Backup / Restore”

3. Scroll down a little to see an Upload Form.
   Click on the 'Upload' text area to choose which template to upload
   
   Using UCBrowser,you'll see four upload options.
   Just Select “Upload local file” and browse to the folder containing the desired template then finally click on it.
4. Now comes the normal issue people encounter while uploading template - The ‘Upload’ button doesn't work.
   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
5. Wait for the page to finish loading.
   Note: Do not exit the page.
6. Once the template finish uploading and refreshes the page,you will find a new Upload Form at the extreme end of the page.
   Re-select the earlier uploaded template and now,the new ‘Upload’ button will work just fine.
NOTE »
This trick(I call it) has been tested positive in Symbian S60 devices with a UCBrowser,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.

That's all.
You can now preview your blog to see the new template on it.

If you encountered any form(s) of difficulty/Error whilst trying this out,kindly leave a comment behind.
Likewise,if you have any contributions,suggestions or questions,please do not hesitate to leave your comments behind.

The New blogger interface as it is, is generally not suitable for blogging via Mobile Phones.
Due to this defect,it has become extremely 'not easy' to upload/edit templates via mobile,edit posts via mobile...amongst others.

But luckily,a solution has finally been gotten for you to Upload your templates to blogs on blogspot via mobile
Here's how...

Step On How To Upload Blogger Templates From Mobile Devices

Login toBlogger Dashboard
1. Select the blog you want to upload the template (if you have more than one) and click on “Template” just like in the image below.
2. Next,click on “Backup / Restore”

3. Scroll down a little to see an Upload Form.
   Click on the 'Upload' text area to choose which template to upload
   
   Using UCBrowser,you'll see four upload options.
   Just Select “Upload local file” and browse to the folder containing the desired template then finally click on it.
4. Now comes the normal issue people encounter while uploading template - The ‘Upload’ button doesn't work.
   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
5. Wait for the page to finish loading.
   Note: Do not exit the page.
6. Once the template finish uploading and refreshes the page,you will find a new Upload Form at the extreme end of the page.
   Re-select the earlier uploaded template and now,the new ‘Upload’ button will work just fine.
NOTE »
This trick(I call it) has been tested positive in Symbian S60 devices with a UCBrowser,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.

That's all.
You can now preview your blog to see the new template on it.

If you encountered any form(s) of difficulty/Error whilst trying this out,kindly leave a comment behind.
Likewise,if you have any contributions,suggestions or questions,please do not hesitate to leave your comments behind.

Read more »

0 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?
Have you tried adding the Automatic Read More button to your blog and not working out?,
Well,here's the solution.

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.

So,to put an end to those awful extra-long texts in your blog's homepage,all you need do is

• Locate the exact point you would like for the button to appear in your individual posts and copy-paste this code there.
• <!-- more -->

NOTE » Always remember to add a space at the beginning and at the end of “more” in the code above.

Surprised ?,don't be!!
It's as simple as that.

Now,you can view your homepage to confirm it's working.
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 Automatically do that here!
That's all.Please leave behind your contributions,questions or critics.
Thanks.

Read more »

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

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 that tutorial,the tool being made mentioned here was also provided by http://centricle.com.

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.
This tool comes really handy in such a situation as you do not have to start counting every single letters manually.

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".

Now,to add this tool to your blog,here's an easier way of doing that.

1. Login to your Blogger dashboard.
2. Navigate to Layout » 'Add a Gadget' » 'HTML/JAVASCRIPT' and Copy-Paste the code below into the text box.
*Alternatively,you can create a page for it [Learn how to create pages in Blogger.]

3. <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>

4. Save the widget and that'll be all.

HERE'S A LIVE DEMO OF THE WIDGET.

String:

That's all!!!

Read more »

6 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.

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.

So,what if you have the link to a video,how do you embed it in a blog(post)?

In this tutorial,I'll be showing you two easy ways to embed the Windows Media Player in a blog to stream live videos & audio files for visitors to easily watch and listen to.

[Video adapted from google.]

Here's How...

1. The first way is by adding the media player as a gadget in the sidebar.
   • Login to Blogger.
   • Navigate to Layout » `Add a gadget` » HTML/JAVASCRIPT
   • Copy-Paste the code below and save the widget.
2. The second method is by embedding the player in each blog-post.
   This can be done by pasting the code below in each post.

Here's the Media-player's code...

<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" />

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

Read more »

3 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”.
It is also needed when a visitor has to write some codes in the comment box.

Although,Blogger has really made it easier to post “html” codes as plain text in the New blogger dashboard,it still isn't helpful in situations when you need some other tags to function in a post.
So,to solve this,a tool has been provided by Centricle.com to make posting of codes easier and faster.

Here's How It Works...

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.

To integrate this widget in your blog,just Copy-Paste the following code snippet preferably into a Page[Learn how to create pages on blogger.]

Here's the code...

<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"></textarea> <input value="Encode" name="submit" type="submit"/> <input value="Decode" name="submit" type="submit"/>
</fieldset>
</form>

Live Demo

Convert text to HTML entities and vice-versal:

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

Read more »

0 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.

So,if you'd love to include this button on your blog,this post will show you how…

1. Login toBlogger.
2. Navigate to Templates » Edit HTML[Always remember to backup your template.]
3. Check the box next to
   Expand Widget Template and search for </head> by pressing CTRL+F.
4. Next,Copy-Paste the code below directly above/before it.
<style type="text/css" media="print">
#noprint {display: none;}
// Hide unwanted elements
body {background:fff; color:000;}
// Black text on White background
a {text-decoration: underline; color:00f;}
//Underline Hyperlinks in blue}
</style>
5. Once done,search(again) for <p><data:post.body/></p>
6. When found, Copy-Paste the following code snippet directly below/after it.
<a href="javascript:window.print()">Print Page</a>
7. Preview the template to avoid errors and thereafter, Save it.

That's all.

Read more »

25 RANDOM BANNER WIDGET FOR BLOGGER BLOGS.

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.

It helps to manage space and is very useful in promoting affiliate links.
So in this tutorial,I'll be giving you an easy-to-use widget which can be modified to suit your taste.

Steps On How To Add Random Banner To Blogs.

1. Login to Blogger.
2. Navigate to Layout » “Add a Gadget” » HTML/JavaScript
3. Next,Copy - Paste the code snippet below
   <script language="JavaScript">images = new Array(3); images[0] = "<a href='ADVERTISER'S URL' rel='nofollow'>
   <img src='URL OF BANNER'S IMAGE' border='0' height='60px' width='450px'> </a>";images[1] = "<a href = 'ADVERTISER'S URL' rel='nofollow'>
   <img src='URL OF BANNER'S IMAGE' border='0' height='60px' width='450px'> </a>"; images[2] = "<a href='ADVERTISER'S URL' rel='nofollow'>
   <img src='URL OF BANNER'S IMAGE' border='0' height='60px' width='450px'>
   </a>";index = Math.floor(Math.random() * images.length); document.write(images[index]);
   </script>

4. Finally,SAVE the widget and preview your blog to ensure it's working.

If you need further information about this widget,please leave your comments behind.

Also Read

HOW TO ADD ADVERTISE WITH US WIDGET TO BLOGGER.

Read more »

0 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.
After so many notifications from Google,it was finally disabled late last-month despite mixed feelings about it.

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.

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 cases of accidentally deleted blogs,and the inability to edit posts makes it worse.

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.

Here's How...

Login to Blogger »» Posts.
Next,navigate to the post you want to edit and get its url.
E.g In UCBrowser,click on “1” then scroll down to select “Page Info”(as seen in the image below) and finally copy the address in “Link Address”.

Once you've gotten the post link,it will look like this ↓
http://www.blogger.com/blogger.g?blogID=5582915502189979689#editor/target=post;postID=372835895764398957;onPublishedMenu=publishedposts;onClosedMenu=publishedposts;postNum=4;src=postname

Now,delete the following from the address you get
;onPublishedMenu=publishedposts;onClosedMenu=publishedposts;postNum=4;src=postname and Copy-Paste it in your browser's address-bar.

UPDATE!(17-02-2013)

I just discovered without deleting the preceding text from the derived url,i.e onPublishedMenu=allposts;onClosedMenu=allposts;postNum=50;src=postname,the trick still works perfect.
So just get the post's url and paste in your browser's address bar.

That's all.
Kindly leave your comments,suggestions and questions behind!!!.

Read more »

1 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.

Well,I must confess,this is one of the most widely-used Social-media widget in the Blogosphere.

It includes the Facebook Like button,Digg Counter button,Stumble and Retweet buttons.

How To Add These Buttons To Blogger

Login to Blogger.
Go to Template » Edit HTML & Check the box next to
Expand Widget Template.

Next,search for <data:post.body/> by hitting CTRL+F.
Just add the following codes directly above/before it.

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

That's it. Do not forget to share your testimony with others[If it worked or not].

Read more »

0 HOW TO RECOVER ACCIDENTALLY DELETED BLOGS.

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

Luckily,blogger has given to its users the priviledge of retrieving a deleted blog.

Here's How...

Login to Blogger. 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 “Displaying 2 of 3 blogs" with 1 hidden”

Next,click on “Show All” to display all blogs including the deleted blog. Finally,click on “Undelete This Blog” and taadaa,your blog is restored.

That's all. Hope this post was handy.

Read more »

0 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.

Once a number or sign is clicked on,the page reloads with the option in the text area.

Here's a demo of this online application.

Script by:SOLJAR2

So,to add this application on your blog,Copy-Paste the codes in the box below into a Page,Post or gadget.<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.

Read more »

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

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

So,if you'd like to embed this widget in your blog,all you have to do is follow these easy & straightforward steps.

Steps on how to add the advertise widget on your blog.

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.

If you do not already have,create one[Learn how to create a page],and specify the amount you charge for each “ad-space”. Name the page “ADVERTISE” and publish it.

Once that's done,we are ready to start.

1. Login to Blogger
2. Navigate to Layout » Add a gadget and selectHtml/Javascript
3. Next,Copy-Paste the code below into the box →
   <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>

4. Replace all YOUR PAGE'S URL HERE in the code snippet with the one you derivated after creating your page. Likewise,you can decide to increase/decrease the widget-image's size by replacing '125' in the code.
5. Finally, SAVE the widget.

If you encountered any challenges,please let us know...

Read more »

0 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.

You will agree with me that no one wants to stay long on a blog that takes so long to load.

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.

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.

How do you add this plugin?

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.

Login to Blogger » Go to Design/Layout » Edit HTML.
Check the box next to Expand Widget Template.
Next,locate </head> in your template by pressing CTRL+F and Copy-Paste the code below just ABOVE/BEFORE it.

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder :&quot;http://beautifulbloggerwidgets.googlecode.com/files/grey.gif&quot;,threshold : 200});
});
</script>

Preview & Save your template.
Hope this helps!!!

Read more »

6 GRAB THIS AWESOME SOCIAL BOOKMARKING WIDGET WITH 3D EFFECT.

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 with how to add animated social bookmarking widget with 3D effect.

This widget is so cool that when hovered on,spins 360 degrees and spins back when released.
To add the widget on your blog,just follow the instructions below.

Login to Blogger,then go to Design » Page element and select 'Add a gadget'.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.

<style>
#social a:hover{background-color:transparent;opacity:0.7;}
#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;}
#social img:hover { -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg);}</style>
<center>
<div id="social">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR FEED URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIeRwrqwuAqvcUlwOwBBPYsSwYp_gHalossIBr5iagaK30uLcU9OdQe2cvNlf_3CHy9N_tlUXxFty0PdyLurPaDz-b61JKynG2M1aDI3ycG5sRFikvhfyYBRbSVAbzkWCbhjkS_oDa99zq/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End RssIcon-->
<!--Start Email Rss Icon-->
<a rel="nofollow" title="Get Free Updates Via Email" href="YOUR EMAIL RSS URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKC-yW01-1uo6VQlHHA162gbzntUdytr-CVfz0WJ63cBvIBVlh6sdyFkXE-hp6rumqHWmyqjY-i1CNCeMSRJIMbLl_DtTH-Dkd8cYcHx8Tahir0AUlSqZxGAGacuH6ElvUrzo8ZwNLmkbd/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Email Rss Icon-->
<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="YOUR FACEBOOK PAGE URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M97PcF8xNpiPBPVb-Z_IUEVWHPLXFdMYFRkaathLgvNQdQ8eobpfsfpjRS-4nl8i-WmyRlMh7mXI2X-xdj7sNz1T0pkNIB3hsBwGKYWVsUFot3I3mJiY0rQqR8lLaY2_9G41kEwKYdTe/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR TWITTER URL HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0aVbHXHydX2402mJnzrAEumNIHNHqwDw5IXFpVSL0Pl8O255f0PJ_RQltFYfvIxuocSSpBPlqGGvtyp1267KCn4hEHPXR5pZGlkskyQK1cRrwz0SPbIO2_HlCoQfrmEAe5lqhtWBURAx/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Twitter Icon-->
<!--Start Google Icon--> <a title="Follow Us On Google " rel="nofollow" href="YOUR GOOGLE PLUS URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGSZLpT5k_J6AHfesUJWnmuVZbnMVN2BxQjEFK2Tu8jZMr-8U8oPWQuPIxe53xSYbUGfD015KO2l8tSkhefy33JPijF5l6SKHuyeBc_SyfzoiFy18KnioUYcBm_6PSTH_q44hRjhVUzSs/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--End Google Icon-->
<!--Start Pinterest Icon-->
<a title="Follow Our Pins" rel="nofollow" href="YOUR PINTEREST URL HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQXPpMuezF38H6B7pr3J9ElPTkKinCrvBjmoEMY1muNG6DfYS4QjR7EypB90RHP9sQaFUeVH9zRzwsMIzdixNTXguvySbPa-qjNYZ6dzaENmT8KJ99zReAFWdC2qGBzfFYx3W3fabbXO7V/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--EndPinterest Icon--></div>
<!--Start Feed Count Button--> <a href="FEEDBURNER URL HERE" target="_blank"><img alt="Feedburner" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--End Feed Count Button--> </center>

NOTE 
If you don't have any of these urls,you can simply remove it for the time being.
Just delete all codes from where you see 'START' to the 'END' part.

Read more »

3 ANIMATED FOLLOW-US WIDGET FOR BLOGS.

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 3D[three dimension] FOLLOW-US widget which can easily catch the attention of your blog visitors.

It was designed in form of a square which rises and changes from gray to a stupefying color when hovered upon.

To add this widget in your blog,here's what you need do →
Login to Blogger,then go to Design » Page element and select 'Add a gadget'.
Now,locate "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.

<style>.blogtoolz-flt-wdt{position:fixed; right:10px; top:36%;}
.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;}
.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>
<div>
<style>
.BlogToolz1{display: block;width:64px;height: 64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_rollout_64x64.png') bottom; text-indent:-99999px;}
.BlogToolz1:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/facebook_color_64x64.png')bottom; height: 64px;}
</style>
<a href="Your Facebook Link Here"></a>
<style>
.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;}
</style>
<a href="Your Twitter Link Here"></a>
<style>
.BlogToolz3{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_rollout_64x64.png') bottom;text-indent: -99999px;}
.BlogToolz3:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/feed_color_64x64.png') bottom; height:64px;}
</style>
<a href="Your Rss Feed Link Here"></a>
<style>
.BlogToolz4{display:block;width:64px;height:64px;background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_rollout_64x64.png')bottom;text-indent: -99999px;}
.BlogToolz4:hover{background:url('http://i1269.photobucket.com/albums/jj591/aditya9172/google_color_64x64.png') bottom; height: 64px;}
</style>
<a href="Your Google Plus Link Here"></a> </div>
<!-- Animation widget ends -->

That's it.Just replace the necessary things there i.e the blue texts and save the widget.

Read more »

0 HOW TO MOVE BLOGGER NAVIGATION BAR DOWN.

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 on how you can remove the bar from a blog.
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.

Here's How To...

Login to Blogger.
Go to Design/Layout»»Edit HTML.[Backup your template in case something goes wrong.]

Check the box next to
Expand Widget Template and search for ]]></b:skin> by pressing CTRL+F

When found,just Copy-Paste the following piece of code directly ABOVE it.

#navbar-iframe {position: fixed;right:0px;bottom:0px;left:0px;}

Next,preview your blog to ensure the are no errors and thereafter,SAVE your template.

That's all.You should see the bar at the bottom of the blog now!!!

Read more »

0 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.

In order to save them that stress,it is very necessary to highlight your comments "as a blogger".

Apart from the stress being curbed in the process,it also helps to dignify a blog author's comment amongst several others.

Before we proceed with this tutorial,you might want to spare a little time to go through the following tutorials →

1. Add a Reply Button To Blogger Comments.
2. How To Change “Post A comment” Text in Blogger.
3. How To Customize Blogger Comment-Message.
   
4. Add a Comment Policy To Blogger.
5. Numbered Comment Hack For Blogger Blogs.

How To Highlight Author Comments in Blogger.

First,Login to Blogger.
Go to Design/Layout→→Edit HTML.[Backup your template in case something goes wrong.]

Check the box next to
Expand Widget Template and search for the following piece of code by pressing CTRL+F

<p><data:comment.body/></p>

Note»
The above code will be seen twice,you have to use the second

Next,Replace the code found above with the following snippet of code.

<b:if cond='data:comment.author== data:post.author'>
<p style='border:1px dotted#008e00; color:#00ff00;background:#d80000;width:auto;padding:4px;'>
<data:comment.body/></p>
<b:else/>
<p>
<data:comment.body/></p>
</b:if>

Having done that,preview your template then finally save it.

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.

Read more »

4 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.

After searching for days,I finally came across one and decided to share it with those who might have thesame questions..

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.

This also has its own uniqueness,as you are able to decide whether you would show post dates,post title,decide the number of comments to display etc.

To do this,just visit this site,and fill out the form appropriately.

The widget will then be automatically sent to the site you specify.

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.

Here's the site again.

I'm sure this will save you a whole lot of stress to using javascripts which might sometimes include backlinks.

Read more »

5 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 Read-on.

In this post,I will be explaining how you can easily add this widget to your blog.

How to add load timer to blogger blogs

To add this widget to your blog,follow the steps below.

Step 1:

Login to Blogger & go to Design/Layout » Edit HTML[Always remember to backup your template.] Check the box next to Expand Widget Template and search for <head> by pressing CTRL+F. Once you get that,copy-paste the codes below directly after it.

<!-- page load timer --> <script type='text/javascript'> var d = new Date(); var starttime = d.getTime(); //Get the start time </script>

Step 2:

Find </body> in your template and immediately before that,copy-paste this code:

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

Preview and Save template.

Step 3:

Login to Blogger » Design »Page element and select 'Add a gadget'. Next,scroll down till you find "HTML/JAVASCRIPT" and click on ADD. Now,copy-paste the following codes in it:

<!-- Widget portion --> <p id="loadtime">Your custom message goes here</p>

Finally,save widget and view your blog to see the load-timer. If you are not satisfied with the “Page loaded in:” that displays together with the load-time,simply change it in “step 2” above.

Read more »

0 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.

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`.

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.

What is a favicon?

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(),right? That's what is called a favicon.

By default,all blogger blogs display blogspot's icon which we are about to change.

Can't see an image?

If you can't see any image,then it can only mean two things »

1. Your browser's image is turned-off → Switch it on[Not all browsers].
2. Your browser does not support favicon.

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.

HOW TO ADD A FAVICON.

Below,I will be giving you the steps to take in order to add a favicon to your blog.

STEP 1→

1. Visit http://tools.dynamicdrive.com/favicon(preferably in a new tab).
2. Click on the image-browse box to generate a favicon from any image in your computer.
3. Next,upload your image and click on “create icon”
4. You will see a download button,click on it to download the generated image icon to your pc.

What to do with the generated icon?

Upload your generated icon to an image hosting site to get the url. I know many people find it very hard to get a .ico image hosting site,but after so many trials,I finally got one. So,to host your “ico” image file,GO HERE.

STEP 2→

Once you finish uploading your icon,copy the generated link and save it somewhere & follow the steps below.

1. Login to Blogger» Go to Design/Layout » Edit HTML.
2. Check the box next to Expand Widget Template.
3. Search for <b:skin><![CDATA[/* in the <head> section of your template by pressing CTRL+F.
4. Just before the code above,you'll see a similar code to the one below,so just replace it with the code snippets below→

5. <link href='http://hostsite.faviconname.ico' rel='shortcut icon'/> <link href='http://hostsite.faviconname.ico' rel='icon'/>
   So,like I mentioned above,replace the red text with your generated icon url.
6. Finally,SAVE your template & you are done.

NOTE↓ 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.!!!

Read more »