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