How to make keyboard like text effect in blogger post

 Blog design and template is the important one for all blogs.It makes the readers to visit again and again to your blog and also makes your blog unique from others.Now I am going to give a trick which makes your post beautiful.This CSS consist of no images so it does not affect your blog speed.Lets see the live demo.

Demo:

Ctrl+b

Ctrl+F

Ctrl+z

Ctrl+y

TrueBloggerTricks 

How To Add In Blogger?

1.) Go To Your Blogger Dasboard

2.) Open Your Desire Blog.

3.) Go To HTML.

4.) Click "Edit HTML"

6.) Now Do As I Did.

7.) Find This Line Using Ctrl+F Function.

]]></b:skin>

Paste this CSS above that line

/*****************************************
Keyboard Style  CSS
******************************************/
kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Using Them On Posts:

For their right implementation on blogger posts, follow these steps carefully.

• Type your entire post
• After completing the post, add this code before and after the text you want to add the effect. 
• A simple example looks like this.

<kbd>Text To Give Effect</kbd>

Your are done!If you have any doubts regarding this post,Please them via comments.Do not forget to share this with your friends!

All in one powerful SEO meta tags for blogger

The meta tags are key entrance to search engine .They are used to provide additional information about the page that is not visible in the browser. The meta tags are always placed within the head section of the Blogger template. This tag can be used to identify the author’s name of the web document and to identify the keywords that describe the site.

 Keywords are the group of words that are frequently used in the document and they have to clearly indicate the context of the document. Search engines use these keywords to group the web sites. So, you should use correct keywords that matches to your blog .The great search engines like Google, yahoo and Bing mainly crawl in your blog title. When you place some important keywords behind your Blog title, your blog makes the search engines much easier to find your blog .This will increase the visibility of your blog in search engines.

Let’s see how to optimize your blogger blog titles and your keywords,Search engine friendly.


1.) Go To Your Blogger Dasboard
2.) Open Your Desire Blog.
3.) Go To HTML.
4.) Click "Edit HTML"
5.) Now Do As I Did.
6.) Find This Line Using Ctrl+F Function.

    Find the following codes using ctrl + f function

    <title><data:blog.pageTitle/></title>

    Replace it with the following code.

    <b:if cond='data:blog.pageType == &quot;index&quot;'>

    <title><data:blog.pageTitle/> - Blogger tricks,widgets,templates</title>

    <b:else/>

    <title><data:blog.pageName/> - TrueBloggerTricks</title>

    </b:if>

Replace the red text by your important blog's Key words.

Replace the Blue text (TrueBloggerTricks) by your blog's SEO friendly name.

Done..! you have a SEO friendly page title and Blog title .Within few days you will see much changes in your blog traffic and Search engine ranking.Do not forget to give feedback about this post via comment!

Helper Blogger like blogger template(clone)

First of all ,Happy Diwali to all my readers and visitors.If you are a Indian you would celebrate it with bursting crackers and with sweets.But,I am busy with something.Ya! you are right, 'Cloning templates '.I tried to Clone Helperblogger template,but it camed perfectly! Helperblogger is a blog administrated by a young blogger Rahul Ippar and It also has a pagerank of 3!I want to share this template as a Diwali gift to Everyone.Let see the Demo

Demo 

Benefits of this template:

• Wordpress like
• Round corners
• Superb sub menu
• Adsense optimised
• Fast loading
• Simple and Elegant
• Magazine type
• Featured Section
• Right Sidebar
• Tabbed widget
• 3 Column footer
• Professional
• Custom fonts

Note:

       If you are a true and genuine blogger,Kindly please leave the footer link.This may help many bloggers like you.

Download Now

 

If you are satisfied with this template,Kindly Do this,

• Like us on Facebook.
• Follow Us on Twitter .
• Subscribe to our Updates by filling the form below the post where it says "Enter Your Email Here"and click on submit.
• Join this site with google connect (or)
• Comment with your blog address to which the template is applied.           

Beautiful related posts text widget with hover effect for blogger

I am going to post three awesome styled Text only related post widget for blogger. I really post this for my friend Rohit Malik ,who asked me for this widget . Actually, related posts widget decrease your blog's bounce rate. Also many related posts widget for blogger look boring and ugly. An those having images will increase up your blog loading time.This related post has no image and loads faster.So, hope you like all of the three.

Features:

1.) Simple With 3-Stylish Design.
2.) Page Counter.Dark And Light Effect.
3.) Only Text To Remain Your Blog Loading Speed Fast.

How To Add In Blogspot?

1.) Go To Your Blogger Dasboard
2.) Open Your Desire Blog.
3.) Go To HTML.
4.) Click "Edit HTML"
5.) Check On "Expand Widget Template"
6.) Now Do As I Did.
7.) Find This Line Using Ctrl+F Function.

</head>

And Copy The Below JavaScript Code And Paste It Before/Above It.

<!--RelatedPostsStarts-->
<script language='JavaScript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 6) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
<!--RelatedPostsStops-->

8.) Now Copy The Below HTML Code And Paste It Where You Want To Show Related Posts Widget.

Like I Suggest To Find These Line Using Ctrl+F Function.

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

</div>

</div>

And Edit The Below HTML Code Then Copy It And Paste It Below/After It.

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>

</b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->

removeRelatedDuplicates(); printRelatedLabels();

</script>

</div>

</b:if>

9.) Next, Find The Below Line Using Ctrl+F Function:

]]></b:skin>

Final, Choose Any One Style, And Insert The Corresponding CSS Code Above It.

Style 1:-

#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #222;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;}

Style 2:-

#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

Style 3:-

#related-posts {clear: both;}
#related-posts h2{color: #fff;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

I hope this widget will help you in increasing your SEO and Bounce Rate.Happy blogging!!!!!

How to add Cool metro style Social Sharing Widget below Blog Post

Social Media play a very important role for every blog or website. With the help of social media, it can get more traffic, visitors and readers to your blog or website. Every social media have unique social sharing buttons designed by their developers. Therefore, we need to add these social sharing buttons in our blog or website to gain more traffic, visitors and readers. Actually, I already shared many kinds of social sharing buttons here in TrueBloggerTricks. And today, I'm gonna share to you another style. It is different from all others because each button has a different background. These social sharing buttons contains twitter tweet, facebook like and google +1. So, If you want to add this widget below your blogger blog post, then just follow the steps given below.

Steps to Add This Widget Below Your Blog Post

Steps.

• Login to your Blogger Dashboard.
• Click the drop-down menu and select Template.
• Backup your Template before making any changes.
• Click Edit HTML ---> Proceed ---> Expand Widget Templates.
• Click Ctrl+F and search the code below:

<data:post.body/>

If you have more than one of this in your template and confused about which one to use, search for <div class='post-footer-line post-footer-line-1'/> instead.

• Just below/after the <data:post.body/> or <div class='post-footer-line post-footer-line-1'/>, Paste the code below:

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(http://1.bp.blogspot.com/-0XK7JZR6VAw/UIC9BwXIMyI/AAAAAAAAAN4/NjbbeWgyV5M/s1600/Cool+Social+Sharing+Widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="tbloggertricks" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
         
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                 
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
         
</script></div>
</div>
</b:if>

• Now click Save Template.

Need Help? If you are facing any problem to implement these sharing buttons in your blog. Please feel free to add your comment. I will try to resolve it in time. I hope you enjoyed this tutorial! Looking forward for your feedback. Thanks!

How to Replace "Post A Comment" Text with image in Blogger

You can see "Post A Comment" text above your comment form in blogger? but it simple but i think not elegant. Right? So now in this post i will show you how to replace the 'Post A Comment' text we see above the comment form with a cool image. This is a very simple hack you don't need to add any JavaScript or any other codes just replace a piece of code with your own image or text. Here I am giving few image which you can use or you can add your own images.

So if you want to change the "Post A Comment" text into a cool image, just follow the steps below.

Steps To Replace "Post A Comment" in Blogger Blog

• Login to your Blogger Dashboard.
• Click the drop-down menu and select Template.
• Backup your Template before making any changes.
• Click Edit HTML ---> Proceed ---> Expand Widget Templates
• Click Ctrl+F and search the code below:

<data:postCommentMsg/>

Note: If you will find this code twice time or more than, then you have to replace all <data:postCommentMsg/>.

• Now replace the code into your own message such as... 

"Leave a Comment"

"We love your comment"

"Say something about this" etc.

or 

You can also replace the code with a beautiful color image if you don't like plain text message. To do this just replace the <data:postCommentMsg/> code with an image URL code as shown below.

Pick an image code below and Replace the <data:postCommentMsg/>

Here is a list of images you can use : 

 

  

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6H7JHmx3cCl0ZL5hEdopE8ZiAp-zyNFA7ToLO-GaOAk3Kz8I90Z7iIbRea2-TkpdcmqMkjX9ODBiRsJkhKfUtHdFwtrgN942RWuHgC3CMfawUBgz-lD-Sq8QV3u4slk41v2ENf3ByCg/s1600/PostAComment.png" /> 

  

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOY0GjHZhB0WloaaFJh_WI8w3xIWfLoL0f4WvPMW2wg8KZIYxYf2IRyDbgFwdo4IIYKEQiIi5c07jAjT1ioLMAvxJ8Lg4EfOnwXpI1Ff_HnK8CfV5WbEArK3opjhT00v61qqCyktu8UXc/s1600/PostAComment+%25282%2529.png" /> 

  

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRE1qtkUShlv4ebp3l9wAOiFwSQpU4e9-AydWY0GFnZx1MxwLRcHBUXNwh5RkVaLx44G-Ka79vbYEz7HViq8TEaHvprktVx4xNortD5oKoHz0nTERlEcftnqN-Xf2IqH5kbXjU3GTNisQ/s1600/PostAComment.gif" /> 

  

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH9O7OdtA-jgohVkSGt6jSYxeBCB9Rd0GPXVjUPVajOur0eimDAVZhgEZoeq30lSZJXgNEMQz4PGcMHwcSqnMR9qV7B3YjCCcOVF-O_8kVHbAZeEWZV_aC6VP63ZVx4j6FQ2w30TPe0bI/s1600/PostAComment+%286%29.png" />

  

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUAg2yw1KHFVNv40Yq9jIHfqyOZJEnekA2qeNGTkOy2mfxExxSObYc97uW0Qe5R4bRR11MO6d4pBVWrPtw9hj4xId6H7U7TFYdGpfTT0cm4PwhzB6i3bc29hXrErmrGRbiSKM2t1BhTL8/s1600/PostAComment+%284%29.png" />

  

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykIzQiG1eBuMEoObZrvGlDpSrTXj3zggljRg5sCnoEhiOSzO0vjM9IVOx4Exj5rJVcK-StWlRCiXSeZsPDeR3P2GYGK7sc9LN1_wl0dT5x6g4i9m0gdetb9WcQPyQKzxUXX1uo7e8xiA/s1600/PostAComment+%282%29.gif" />

• After replacing click Save and then your Done!

I hope this post will help you. If you have problem, Please let me know so that I can help you. Happy Blogging...:-)

How to get free unlimited backlink to your blog

Backlinking is the succes of every blogger because I am now getting thousands of impresions one day and I want to share it with you guys. check this out

How To Get 5,000 Automated Backlinks?

1. FreeBacklinkTool:This website allows you to create 500 backlinks within minutes. The links you create here will help your website rank higher in search engines and get attention by major search engines like Google, Yahoo & Bing.









You do need to create an account but it is 100% Free To register.

2. IMTalk: This website is AMAZING and allows you to create 2523 backlinks! It does take longer than FreeBacklinkTool but it all runs in the background. It will take about an hour to hour and a half to complete.










This is also 100% FREE but they do have a forum to which you can register and I highly recommend.

3. BacklinkGenerator: This site is also extremely useful and MUCH quicker then the other too but it only creates 325 backlinks in about 5 minutes.







Again this is 100% FREE and no account required.

4. BulkPing: I absolutely love BulkPing and will also be talking about using their service for getting your backlinks indexed but for now we will be using it to generate over 3500 backlinks!! Yes FREE 3500 automated backlinks!





Now I do have to let you know Bulkping works great but sometimes it does not create all 3500 links. Sometimes in only does 1,000 and other times 2,000. I’m not sure why this varies but it still works just fine.

Also this one takes the longest of the 3 at about 90 minutes to 2 hours to complete.

That is pretty much it you can easily use these 4 sources to index your website or send some link juice to your already established website.

You can also submit your site to these websites multiple times a month if you’d like.

I hope you found this article helpful and you create your backlinks!To Your Backlinking Success, !!!!!!!!