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 +"#more"' 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 +"#more"' 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 HOW TO CHANGE BLOGGER MOUSE CURSOR.

It's good to make your blog look awesome so visitors can fall in love with it to visit some other times.

Changing the blogger cursor,is also a way of getting your visitors attention.

To change your cursor,all you've got to do is follow these very simple instructions.

HOW TO CHANGE THE CURSOR.

Login to your Blogger Account.
Go to Design/Layout » Edit HTML & Check the box next to
Expand Widget Template.

Now,search for ]]></b:skin> by hitting CTRL+F.
Just add the following codes directly above/before ]]></b:skin>

body, a, a:hover {cursor: url(http://cursors2.totallyfreecursors.com/thumbnails/1pointer31.gif), progress;}Preview your blog and save your template.

To change the cursor,just change the link above with your cursor's address.

HERE ARE SOME SITES TO GET COOL CURSORS FROM.

• 123 cursors.
• FUN UTILITIES.
• TOTALLY FREE CURSORS.
• CURSORS FOR YOU.

That's all!!!.

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 »

0 PAGE NAVIGATION/PAGINATION FOR BLOGGER BLOGS.

Page Pagination/navigation widget is a very useful widget every blog should have.
The widget replaces blogger default 'next','previous' and 'home' link at the buttom of every post.Likewise,it makes your blog look more professional.

HOW TO ADD THE PAGINATION WIDGET.

Login to your Blogger acc.,then go to Design >> Page element and select 'Add a gadget'.
Now scroll down to where you see "HTML/JAVASCRIPT" and select ADD.
Just copy/paste the code below and save the widget.<style type="text/CSS"> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #7AA1C3; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #7AA1C3; background-color:#F6F6F6; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #7AA1C3; background: #F6F6F6; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #7AA1C3; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#7AA1C3; } </style><br /> <script type="text/JavaScript"> function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==" .com /"; var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var isPage = thisUrl.indexOf("/search?updated")!=-1; var thisLable = isLablePage? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; var pageCount = 2; var displayPageNum = 5; var upPageWord = 'Previous'; var downPageWord = 'Next'; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t; if(isLablePage){ if(title!=''){ if(post.category){ for(var c=0, post_category; post_category = post.category[c]; c++) { if(encodeURIComponent(post_category.term)==thisLable){ if(itemCount==0 || (itemCount % pageCount==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } } }//end if(post.category){ itemCount++; } }else{ if(title!=''){ if(itemCount==0 || (itemCount % pageCount==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } itemCount++; } } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord+'</a></span>'; } }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{ if(p==0){ if(isLablePage){ html = labelHtml+'1</a></span>'; }else{ html += '<span class="showpageNum"><a href="/">1</a></span>'; } }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p< htmlMap.length;p++){ if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"> <span style="COLOR:#000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div> '; if(isPage || isFirstPage || isLablePage){ var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } } </script><br /> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>THAT'S ALL!!!
Note:-Save the widget below 'Blog posts'.

Read more »

0 HOW TO TAG A FRIEND/GROUP OR PAGE ON FACEBOOK.

To tag a friend on your facebook status,you have to know the facebook Id/Uid of that person first.
On getting the facebook Id/Uid,just include the following codes in your status update.

@[UID:0]

Replace the UID above with the 15 digits number of the person/group you want to tag.

Example:

@[100023256560456:0]

THAT'S ALL.
For tutorial on how to get facebook Id,visit this post.

Read more »

0 HOW TO FIND A FACEBOOK ID/UID.

Hello to everyone.Today,I'll be giving out some cool ways by which you can get your facebook Id.
This though,is a very easy task for some people,but you can just use these to play or amuse some other person(s).

If you are a facebook newbie,&you don't know what it is,Facebook ID is that unique 15 digits that facebook gives to its users,groups,pages etc... for easy referencing.

HOW TO GET ID.

You can use any of the examples below..

1. USING FACEBOOK GRAPH:-This is considered as the easiest way to get a facebook Id.
   To do this,login to your Facebook acc. and then follow this link http://graph.facebook.com/your-username-here
   .Just change the your-username-here above to your account username and feel the magic.
2. USING JAVASCRIPTS:- You can also get your Facebook Id by using these simple javascripts.
   

   To get your own Facebook Uid/id

   Go to your profile page & paste this in the address bar.javascript:alert('Your Facebook ID : '+Env['user'])

   To get your friend/group/page's Uid/Id

   Use one of the following on the particular profile/page you want to get. javascript:x=$('content').getElementsByTagName('a');for(i=0;i<x .length;i++)if(x[i].href.indexOf('[]')>1){y=x[i].href;alert('Facebook ID : '+y.substr(y.indexOf('[]')+3));break};void(0) OR javascript:x=document.forms;for(i=0;i<x .length;i++){if(document.forms[i].xhpc_targetid){alert('Facebook ID : '+document.forms[i].xhpc_targetid.value);break}};void(0)

NOTE:-
If you are using Google chrome or browsers which use webkit as their main search engine,then javascript: will be automatically scrapped even if you directly Copy-paste the above code.
In such case, just add javascript: at the start.!!!

Mobile users can also use UC BROWSER.

Read more »

0 OPERA-MINI BROWSER TRICKS.

No doubt,OPERA-MINI is one of the world's leading internet browsers for both Mobile and Computer users..

Today,I 'll be giving some cool opera-mini tricks to play around with your browser.
Just paste any of the codes below in your opera browser.

config: , opera:config
Access menu Power-User setting

opera:about
This is for seeing some opera information.
opera:blank
To see blank page
opera:cache
See all items on your browser's cache
server:reset
Delete all cookies
myopera:async
syncronice ur bookmark to Opera Mini
myopera:login
Login to Opera Mini synchronize
myopera:logout
Logout from Opera Mini synchronize
myopera:signup
SignUp to Opera Mini synchronize
myopera:term
Seeing ToS from Opera Mini sinkronisasi
myopera:///b
Go To session "More Bookmark"
myopera:///n
Go To note syncronization service

myopera:///n/af
Create new folder to note syncronization service.
myopera:///n/an
Create note to syncronization service

debug: or server:version
Seeing Opera Mini version, and some information about OperaMini server which its used
o:A
Go To first page of Opera Mini
o:B
Seeing menu on fullscreen
o:C
seeing tool menu on fullscreen
o:D , o:E or o:F
No used
o:G , o:H , o:K , o:N , o:O, o:P , o:Q , o:R , o:S , o:T , or o:W
Go to blank page

o:I
Go To Menu Setting
o:J
Go to menu Help
o:L
Go to list of shortcut
o:M
Go To page information
o:V
Go To History
o:X
Go To page About Opera (menu, ~tool, ~help, ~about)

o:Y
To bookmark this page
o:Z
Seeing all bookmarks
o:$
Go to "failed to connect" page.

Gotten from http://www[dot]tricksndtricks[dot]in.

Read more »

0 HOW TO PERMANENTLY DELETE A FACEBOOK ACCOUNT.

If you wish to delete your facebook account for one reason or the other,just follow the steps below.

STEP 1

Before you can delete your facebook account,you'll have to delete all linked sites making use of that particular account.

To delete these linked accounts,login in to your facebook acc. and click on App section in the sidebar. Now,delete all the apps/linked accounts that uses or connect with your facebook profile.

NOTE:-If you don't delete these applications,whenever you use a connected site to login with your facebook information,the account deletion will be canceled and your account will be reactivated.

STEP 2

When you're through with the step above,visit this facebook link and sign in to your facebook account.Now click DELETE MY ACCOUNT & you are done.

IMPORTANT NOTICE
Do not login to that account for the next 14 days,i.e "2 weeks" if you don't want it to be re-activated.

Read more »

3 ADD REPLY BUTTON TO BLOGGER COMMENTS.

The "reply button" is one of the most essential hacks on blogger,as it gives you and your readers an advantage to reply directly on any comment.
With this hack,all you have to do is hit the reply button at the buttom of any comment and a pop-up window will open for you to write your comment and publish.

HOW TO ADD THE BUTTON ON YOUR BLOG.

To add the reply button,follow the steps below.

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 the code below by pressing CTRL+F

<data:commentPostedByMsg/>

Now paste the following codes immediately AFTER/BELOW the code you got above.

<span class='comment-reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id+&quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName+ &quot;%22%3E&quot; + data:comment.author
+ &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars
=yes,width=400,height=450&quot;); return false;'>[Reply]</a></span>

To make this script function on your blog,you'll have to replace YOUR-BLOG-ID above with your blog's Id numbers,usually 19.
To get your blog's Id,login to your Blogger Account and check the address of the current page in your browser,then copy the digits in it.
You can also change the [REPLY] above to anything like Reply to this comment,leave a comment on this e.t.c...

Just preview and save your template.

Read more »

1 CREATE A SITE-MAP FOR BLOGGER.

Site-Map is essential on all blogs,as it allows for better & easier navigation.
Site map help make search engines such as Google,Yahoo,Bingetc... crawl your site the more.

By placing all the URLs in one place, visitors can quickly find the specific content they want to read, and search engine crawlers can easily index all the pages listed on it.
With Blogger site map,your blog will be more visible on search engines and this can be an effective way of increasing your blog's visitors.

Below is my blog's site-map to give you a better understanding

---

---

With the example above,you can see that the list of all posts in my blog was displayed and it was easier for you to find any post in it.

HOW TO ADD A SITEMAP IN YOUR BLOG.

It's not possible to copy the links of all the posts above and start adding it one after the other.So I'll be giving you an easy javascript which will do the whole job for you.
HERE IT IS→→→→→<script style="text/javascript" src="//www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script><br /> <script src="//YOUR-BLOG.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script><script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script><br /> <script src="http://freebie-planet.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

HOW TO USE THE SCRIPT

To use this script,you will have to create a new blogger page,then paste the code above in the text-area.
Use SITE MAP as the title and thereafter,publish your page.

To add the site-map address to your blog's header menu,just view the page you just created and copy the link.

Read more »

0 CREATE STATIC PAGES ON BLOGGER.

Bloggerallows every blog to have stand-alone pages which enables you to create and get the link address of a page which is hidden from your Blog visitors by default.

You are given the option of displaying your blog pages in the sidebar or any position you want to show it.
To enable your visitors see the complete list of your blog pages,just follow these steps.

First of all,Login to your Blogger Accountand go to Design >> Page element then select 'Add a gadget'
On getting to the next page,you will see varieties of Gadgets/Widgets you can add to your blog.Just locate"Pages" and then select ADD.Now,the complete list of your created pages will be visible to your visitors.

When I started blogging,I didn't know the pages would be necessary for me to use,and I Know that's what many newbie bloggers will think.
Below are some benefits of using blog pages.

• You are able to create standalone pages which can only be viewed by visitors if allowed.
• You can get the link of that page to add to your blog's top menu links or dropdown.

Although,blogger allows just 10 static pages,it's kind of enough for a blog to use.

WHAT TO CREATE IN BLOG PAGES.

There is quite a number of things you can create on a blog page.
This includes:-

• Site Maps
• Privacy Policy
• Contact Us Page e.t.c...

HOW TO CREATE BLOG PAGES.

Login to Blogger and select POSTING →→ EDIT PAGES..
On getting there,just select "NEW PAGE" and you are done.

Read more »

6 HOW TO CHANGE "POST A COMMENT" TEXT IN BLOGGER.

In the default Blogger template,to post a comment a link is always provided,i.e "Post a comment" if the embedded comment form is disabled.
Likewise,the text is always seen above the comment area if the embedded comment form is enabled.

If you are not satisfied with this default text,you can simply change it with an image/text.

HOW TO GO ABOUT THIS.

To change the POST A COMMENT text on your blog,just follow these simple steps.
First,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.

Now,search for the following codes by pressing ctrl+f.

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/>
</a>

AND

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

On getting those two codes,just REPLACE the texts in blue with whatever you like,such as "Write a comment,leave your replies etc.
To use an image instead of text,Just replace the codes in blue with the following.
<img src="YOUR-IMAGE-URL" alt="TEXT-TO-DISPLAY"/>

You are done.Just preview your blog and save it.

NOTE:-Remember to change the "YOUR-IMAGE-URL" above to the link of the text's image usually in .jpg , .png,etc format.
Likewise,change the "TEXT TO DISPLAY" above to the text your visitors will see in case they switched off their browser's image.

Read more »

0 COMMENT BUBBLE FOR BLOGGER.

Comment bubble is very useful in blogs,as it makes your blog look more attractive and professional.
What is comment bubble?
You would notice a number at the top right-hand of this post title with a picture in the background.That's what comment bubble does to blogs.It shows the number of comments in a post and when a visitor clicks on it,it slides automatically to the comment section of the post after loading.

HOW TO ENABLE COMMENT BUBBLE.

Login to your Blogger Accountand go to Design >> 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 on your keyboard.

On getting that,paste the following codes BEFORE/ABOVE it.

.comment-bubble{float:right;width:48px;height:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3I5-aMdTEXshcB-s6eSf3N8mssd06k4bvsphQqRtixEQBanBBDs6Hqnb5lF6q4qyTx-_D1XeI9UIWwTb6t5G4erLnzNlYx5sXr9Z8TagUUKNBhzjYnbaoicukgChdHbYQcA2SFTf-Z68/) no-repeat;font-size:18px;margin-top:15px;margin-right:2px;text-align:center;position:float;}.comment-bubble{float:right;width:48px; height:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3I5-aMdTEXshcB-s6eSf3N8mssd06k4bvsphQqRtixEQBanBBDs6Hqnb5lF6q4qyTx-_D1XeI9UIWwTb6t5G4erLnzNlYx5sXr9Z8TagUUKNBhzjYnbaoicukgChdHbYQcA2SFTf-Z68/) no-repeat;font-size:18px;margin-top:15px;margin-right:2px;text-align:center;position:float;}

Now,find this piece of code <b:if cond='data:post.link'> by pressing CTRL+F as usual and replace it with the following~~

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>

<b:if cond='data:post.allowComments'> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a> </b:if> <b:if cond='data:post.link'>

Now,preview your blog and SAVE it.
That's all. You should have a comment bubble on your blog now.
You can replace the image in the css code above with any of the following»»

Just get any of the image's url by right clicking on the image & change it with the one in the css above.

Read more »

0 CUSTOMIZE BLOGGER COMMENT MESSAGE.

This is another way of encouraging your blog visitors to leave a comment before leaving.In one of my Previous posts,we talked about adding comment policy to blogs.

In Blogger default templates, if there are no comments in a post, the default template says "0 comments."
After the first comment,it says "1 comment," and so on.
Although this is accurate,it is not very attractive.

With this simple hack,you can include your message to it.

STEPS ON HOW TO CUSTOMIZE THE MESSAGE

Go to Design >> Edit HTML.Backup your template in case something goes wrong.

Check the box next to
Expand Widget Template and search for
<a name='comments'/>
by pressing ctrl+f.

Below that code,you will find the following piece of codes~

<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Just replace the codes in blue with the following~

<b:if cond='data:post.numComments == 0'>
Be the first to reply!
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/> so far. What are your thoughts?
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> so far. What are your thoughts?
</b:if>
</b:if>

<b:if cond='data:post.numComments== 0'>Be the first to reply! <b:else/><b:if cond='data:post.numComments== 1'>1 <data:commentLabel/>so far. What are your thoughts? <b:else/><data:post.numComments/> <data:commentLabelPlural/>so far. What are your thoughts? </b:if></b:if>

Having done that,just preview your blog and thereafter SAVE it.
THAT'S ALL!!!.

You can edit the texts in red to yours.

Read more »

2 TOP COMMENTATORS WIDGET FOR BLOGGER BLOG.

In one of my Previous posts,I talked about adding Recent commentsto blogger blogs,& today,we'll be talking on how to ascertain the best commentator on your blog.

No doubt,Top commentators widget propels visitors to comment more in order to get to the first 10(whichever number is specified) of a blog.
Although,this widget is only useful on blogs with many members and commentators.It also comes handy whenever you want to give gifts to your blog members.

HOW TO ADD THIS WIDGET.

Go to Design >> Page element and select 'Add a gadget'.

Now scroll down to where you see HTML/JAVASCRIPT and select ADD.

Paste the following scripts and SAVE IT<script type='text/javascript'> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title +"</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script type="text/javascript" src="//pipes.yahoo.com/pipes/pipe.run?_render=json&amp;_callback=pipeCallback&amp;_id=918c4b96efdf63fee389f2f025085904&amp;EntertheURL=http://+YOUR-BLOG.blogspot.com/+&amp;number=+10+&amp;Nametobeexcluded=Anonymous"></script><script type='text/javascript'> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title +"</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2F YOUR-BLOG.blogspot.com/ &number= 10 &Nametobeexcluded=Anonymous"></script>

CUSTOMIZING THE WIDGET

YOUR-BLOG.blogspot.com-Change this to the address of your blog.
number= 10-This is the number of commentators to display.Change it to any number you like.
Nametobeexcluded=Anonymous-This is the name of a visitor you want to disable from displaying.You can also change this to the name of one of your blog visitors or AUTHOR.

Read more »