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 »

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 »

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 »

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

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 »

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 »

16 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 “Share this post” 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.

How to add shortened url to your blog.

In this tutorial,I 'll be making use of bit.ly i.e twitter's default service. To begin,you will have to create an account with bit.ly to get your API KEY.Once gotten,we can begin with the tut.

STEP BY STEP TUTORIAL.

Login toBlogger&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. On getting that,Copy-Paste the code below directlyabove/before

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&amp;login=USERNAME&amp;apiKey=YOURAPIKEY"></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>

Replace USERNAME with the name you supplied while registering at bit.ly and also replace YOURAPIKEY with the key assigned to your account.

STEP 2»

Search for this line of code[CTRL+F]

<div class='post-footer-linepost-footer-line-3'>PLACE SCRIPT HERE</div>

Replace “PLACE SCRIPT HERE” in the code above with this»»

<b:if cond='data:blog.pageType =="item"'><form id='shorturl'/></b:if>

Now,Preview & Save your template.

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.

Read more »

0 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.
It is often used by television stations to pass on information to the public,without stopping the ongoing programme.

I know some people will think this will be very hard to execute,but the truth is~It's very simple!!.

HOW TO SCROLL TEXTS USING MARQUEE.

I will be giving out the codes with examples below.
NOTE:-If the texts in the examples does not scroll,that means your browser doesn't support the scrolling feature.

Scroll text from right to left

This is the most popular and commonly used.It moves text from right side of a page to left.<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.

Read more »

0 HOW TO SHOW/HIDE BLOGGER WIDGETS ON PARTICULAR PAGES.

When you add a new widget/gadget on your blog,it automatically displays on your blog's homepage,static pagesand post-pages.
Whereas,there are some widget which is not needed in particular areas of your blog.
E.G,Widgets like Recent comments,Related posts,Recent posts,Top commentatorsetc...which are not needed in static pages &sometimes homepage are displayed everywhere,thereby flooding your blog with extraneous widgets.

Fortunately,there are some conditional tags which will help solve this problem.
A Conditional tag consists of two sections of codes i.e,A <b:if+condition> and a matching end tag which is </b:if>

HOW TO DISPLAY/HIDE WIDGETS ON BLOGGER.

• To display/hide widgets on specific pages,you have to know that particular widget's id first[You can leave a comment below if you don't know how to get it.]
• Login to Blogger » Design/Layout » Edit HTML.
• Check the box next to
  Expand Widget Templateand search for the widget's Id.

APPLYING CONDITIONAL TAGS.

On getting the widget's id,you will get something like this»
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
CONDITIONAL TAG GOES HERE <!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>CLOSING TAG.
</b:includable>
</b:widget>

Below are the conditional tags to replace with the ones in the widget above.

TO SHOW A WIDGET ONLY IN HOMEPAGE.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

SHOWING WIDGET ONLY IN LIST PAGES.

<b:if cond="data:blog.pageType == "index"">

SHOW WIDGET ON ONLY POST PAGES.

<b:if cond='data:blog.pageType == "item"'>

SHOW WIDGET ON A SPECIFIC PAGE.

<b:if cond='data:blog.url == "URL OF PAGE"'>

SHOW WIDGET ON ARCHIVE PAGES ONLY.

<b:if cond='data:blog.pageType == "archive"'>

SHOW WIDGET ONLY ON STATIC PAGES.

<b:if cond='data:blog.pageType == "static_page"'>

SHOW WIDGET ON BOTH POST & STATIC PAGES.

<b:if cond='data:blog.url == data:post.url'>

SHOW WIDGET ON ONLY LABEL-SEARCH PAGES.

<b:if cond='data:blog.searchLabel'>

NOTE:-Whenever you use any of the codes above,do not forget to include the matching end tag,i.e </b:if>

ENCOUNTERED ANY DIFFICULTY?
DO NOT FORGET TO LEAVE A COMMENT BEHIND!!!

Read more »

0 SOCIAL SHARING WIDGET FOR BLOGSPOT.

Previously,I wrote on how to add stylishopen heart bookmarking widget on blogger& today,I'll be giving some cool sharing widget to integrate on your blog.

This widget contains: facebook,twitter,digg,stumble linkedin and technorati buttons which will appear at the buttom of all your posts.
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.

HOW TO ADD THE SHARE WIDGET ON YOUR BLOG.

Login to Blogger » Design/Layout » Edit HTML.[Backup your template in case something goes wrong.]
Check the box next to
Expand Widget Template and search for <data:post.body/> by pressing CTRL+F.

Now,copy/paste the code below just after <data:post.body/>.

<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="&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url +&quot;&amp;title=&quot; + 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/AVvXsEiFCRdkwAgejaIyJDfQFBcWcDm2_L5qW1sLf4wCixc3YN0GXjgzEcJbaULdULAc3_5w0Fw_z2ZAeYt3KpWuae7zViqezs_vI7i51s8pfqRv0odW4kYbTg5qjH3_FU5zxl8EaOHdItU81Ps/h120/1.PNG"/></a></td><td><a class="external" expr:href="&quot;http://twitter.com/home?status=Reading:&quot; + data:blog.title +&quot; - &quot; + data:post.url + &quot; (@NAME)&quot;" rel="nofollow" target="_blank" title="Tweet This!"><img alt="Tweet" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1ir2lgJf1S35F_bALLdr-QB0Mv-jfjTwWY5n4T8q_S7V0coJisMjuRqNAshkHJGmjr1_R0hn6Z0v8znabR_krOObioaq9fIyCF91qS2DfQU00w7MH1vszi55C5AlGuNV8OJzgt4rnRo/h120/6.PNG"/></a></td><td><a class="external" expr:href="&quot;http://technorati.com/faves?add=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Share this on Technorati"><img alt="Technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKsk-Kzy2r1AoO5M-Zuhb18qB6FBOTow_Z4neVHprIqZubUX8Djymdi6xQUklJ0hEa2DLVEWf5HVSZZPv1IenSS_5XLw7MqD_cRdJWB5iQ-OfT_EhBpcUOO1v4ITOESYSqk0llPmDq94/h120/5.PNG"/></a></td><td><a class="external" expr:href="&quot;http://del.icio.us/post?url=&quot;+ data:post.url +&quot;&amp;title=&quot; + 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/AVvXsEggVjbqGfhHcYuZpSIh2RZv4PCkhPTbYCXzVS33bM8SQ6VvnqPlhWT21zgQheMSEtyuLhI6p2xebxgWm_JyAYFaKSew5nHq1qNqvcRZlYew3DOE6vQYV6jbY-TE8LqMFR4jtyoj8szao_g/h120/3.PNG"/></a></td><td><a class="external" expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Digg this!"><img alt="digg it!!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoFBrFbImRW2yOmcbnmVCDNj-ioD9znuHrw5RuXaR7ZfUKPQO03IBxXi7FWIe_io9fCCw1W9mOmNrC1RqaxJYBENAnWvZmc31PXQdUjn5O0NB3jbfcqwme55TQlm0dR1m1FpbiT0_67Q/h120/2.PNG"/></a></td><td><a class="external" expr:href="&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url +&quot;&amp;title=&quot; + data:post.title" rel="nofollow" target="_blank" title="Share this on Linkedin"><img alt="linkedin" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ZwxCa_cCjgD_pFAkvl0m7gHWdIeZVM5MTXdw125HRoap2gCRCw2aKgqjYfqPHWZeGqYosx2XJRySqovUWqeBlCg-n_NB3x8ocY9pKonJcaWVAaFWNMogHTcJAYHwNdm6Oygfq5JnBDE/h120/4.PNG"/></a></td><td><a class="external" expr:href="&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url +&quot;&amp;title=&quot; + 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/AVvXsEhGrmdXV6LVZFBhOPWBCv5E_ewegk8-QwApkf8uKJBsLTSAVCvSprL9zDZ9BlHdLIlZdVRxEOeGOehUHtMzem37BItk2cD0I1UJd7z9px6kfITqCW6GqQFBOST3ukjP_3qvxEAOcAbkfgE/h120/7.PNG"/></a></td></tr> </table></div></b:if>Next,search for ]]></b:skin> and paste the codes below directly above/before it.#shareit{width:100%px;height:50px;border:0px solid red;position:relative;} #shareit tr td img{width:50px;height:50px;position:relative;}DONE!!!.Just preview your blog & save it if there are no errors.

Read more »

1 HOW TO PLACE POST TITLE IN READ MORE LINK.

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

You might have seen some blogs having each-post-title after a read more/continue reading text.
Your blog visitors will also have the understanding of which post they want to read when they see the post title..

HOW TO GO ABOUT THIS.

As usual,login to Blogger » Design/Layout » Edit HTML.[Backup your template in case something goes wrong.]
Check the box next to
Expand Widget Template
and search for the code below by hitting CTL+F.<b:if cond='data:post.hasJumpLink'><br /> <div class='jump-link'><a expr:href="data:post.url +&quot;#more&quot;" expr:title="data:post.title"><data:post.jumpText/></a><br /> </div></b:if>On getting that,just Replace it with the code below <b:if cond='data:post.hasJumpLink'><br /> <div class='jump-link'><a expr:href="data:post.url +&quot;#more&quot;" expr:title="data:post.title"><data:post.jumpText/> <data:post.title /></a><br /> </div></b:if><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.

Read more »

0 STYLISH OPEN-HEART BOOKMARKING WIDGET/GADGET FOR BLOGSPOT.

This is one of the best bookmarking widget I've come across.
The bookmarking widget is made in form of heartlike seen in the image above,and whenever you mouse hover it,the heart slides open and several bookmarking buttons such as facebook,twitter,linkedin,stumbleupon,pinterest etc are revealed for your blog visitors to use.

You can also visit this post for another method of adding bookmarking widget in floating form.

STEPS ON HOW TO ADD THE WIDGET ON YOUR BLOG.

First,login to your Blogger Account.
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 </head> by pressing CTRL+F.

On getting that,just copy/paste the code below,directly above/before it.

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher:&quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Having done that,the next step is to search for </body>[CTRL+F]
Now,copy/paste the code below directly above/before</body>

<div style='position:fixed; bottom:2%;left:2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<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>

Just preview and save your template.
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.
That's all.

Read more »

0 CSS RELATED POST WIDGET.

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 embed the codes into their template,this is a nice way of doing that.

HOW TO ADD THE WIDGET ON YOUR BLOG.

First,login to your Blogger Account.
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 </head>by pressing CTRL+F.

On getting that,just copy/paste the code below directly before/above it.

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType ==&quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia,&#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://farm8.staticflickr.com/7104/7267555714_285261d73d_t.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

NOTE»
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 red above.
Likewise,to change number of posts,replace 5 in the code above.

Next,search for either of these codes

<div class='post-footer-line post-footer-line-1'>

Can't find that?,search for this instead.

<p class='post-footer-line post-footer-line-1'>

On getting any of those two,copy/paste the code below directly after it.

<!-- Related Posts with Thumbnails Start-->
<!-- remove --> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast!= &quot;true&quot;'>
</b:if>
<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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --> </b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://freebie-planet.blogspot.com'>Home of internet freebies.</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails End-->

CHANGE 5 ABOVE TO THE NUMBER OF POSTS YOU WANT SHOWN.

Now most importantly,save your template,and that's it.
Adapted from HELPLOGGER!!!.

Read more »

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

This button is similar to facebook & twitter send buttons.

HOW TO ADD THE BUTTON TO YOUR BLOG.

To add this button,just follow the steps below carefully.

First,login to your Blogger Account.
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 </head> by pressing CTRL+F.

On getting that,copy/paste the code below directly ABOVE/BEFORE it.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">{lang: 'en-US'} </script>

Now,to add this button directly below your post title,search for <data:post.body> and paste the codes below directly above/before <data:post.body>,but if you would like it after your blog posts,then paste the code below/after <data:post.body>.

HERE'S THE CODE

<div style='float:left'><g:plusone size="standard" expr:href="data:post.url"/></div>

You can also change the size of the button above by changing the text in red to either small,medium or tall.
All that is left for you to do now is preview your blog to ensure there are no errors,and afterwards SAVE YOUR TEMPLATE.

Read more »

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

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

Here are some nice image hosting websites

IMAGE HOST

POST IMAGE

PHOTO BUCKET

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.

Back to the main issue.

On getting the link to your image,paste it in the html code below,and save it somewhere.
<img src="YOUR-IMAGE-URL-HERE" style="border-width:0px"/>

HOW TO IMPLEMENT THIS

Login to your Blogger Account and go to Design >> Edit HTML.[Backup your template in case something goes wrong.] and
Check the box next to
Expand Widget Template.

Search for <b:if cond='data:post.url'> in your template,by pressing CTRL+F.
On getting that code,just place the html you saved above directly BELOW/AFTER to get something like this
<b:if cond='data:post.url'> <img src="YOUR-IMAGE-URL-HERE" style="border-width:0px"/>

Preview your blog to ensure there are no errors,then Save your template.NOTE:-In case you couldn't get a small image to use,you can add the image-size-command by simply putting a WIDTH="50" HEIGHT="50" before the closing tag of the image above.Change the "50" above to anything.

Read more »