The Brain of a Blogger (Infographics)

Hi guys,It's been a While since my last post due to some important exams.Now my all exams are over. Ok ,Lets come to the point.While I am surfing in some blogs and websites for my next post Idea,I saw a stunning infographics which makes me to say "Wooh" .This beautiful infographics is taken from Cristianmonroy blog and This infographics speaks all about a life of blogger.Nothing to explain from my side.No doubt this is one of the best infographics explaining each minute detail in very interesting way.

Please say view about this infographics in comments.Don't forget to share this post!

Cool Follow Us Twitter Bird Widget For Blogger

This post is written by our guest author.Check how to become a guest author in True Blogger Tricks

Hi guys. Exposure to social media is a very crucial task to gain reputation. Well, people often don't share others blog on their account because they see not benefit in that. In this post, we would show you a very nice twitter widget bird which is attractive. It is made from Flash javascript. I was just surfing on internet and found this widget on a site so I immediately took out the code from source. Hope you would like it..

Learn more »

How to make Beautiful Custom 404 error page in Blogger

"The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested." In simple words the page that will be displayed when the actual page is not found is called a 404 Error Page.  Now Blogger Error pages use the same template .This would help template designers in making up custom beautiful 404 Pages.This tutorial will help you in setting up a Custom stylish mouse hover effect 404 page for your Blog.You may seen many 404 designs and images but this is very stylish and and made up of no image .This will also make your blog more professional.This is the much needed one for Every developing or developed blog. Lets see the Live Demo

Demo

By Default, your Blogger Error page will display this error message

You can Customize this message beautifully to something else from the Blogger Settings.

 Copy the below codes and paste in that box

<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; }</style> <div id="error-404"> <span>404</span>

</div> <h1 class="large-heading" style="text-align: center;">Page not found.</h1> <h2 class="light-heading" style="text-align: center;">Please check that there isn&#8217;t a typo in your URL.</h2>

That all! You have a beautiful 404 error page in your blog.Do not forget to share and comment about this post :)

Mouse Hover Effect Email subscription widget for blogger

This post is written by our guest author.Check how to become a guest author in True Blogger Tricks

Hello Friends I Am Rajat A Co- Author At TrueBloggertricks. Today  I am sharing how to add an stylish mouse hover effect subscribe us widget which is used by lordhtml. It is A cool and simple widget that you can easily add in your blogger sidebar.  Please Continue..

How To Add An Subscribe Us Widget Like Lord Html

• Go TO Your Blogger Dashboard
• From The Drop Down Menu Choose Layouts
• Then CLick On Add A Gadget
• From The Pop Out Menu And Choose Html/Javascript
• THen Paste The Below COding 

<style>

.subscriptionboc

{

 border-style:solid;

 border-width:2px;

 border-color:#000;

 padding:20px;

 width:250px;

    background:#fff;

transition: box-shadow .777s;

-webkit-transition: box-shadow .777s;

-moz-transition: box-shadow .777s;

-o-transition: box-shadow .777s;

-ms-transition: box-shadow .777s;

}

.subscriptionboc:hover

{

 -moz-box-shadow:    inset 0 0 10px #000000;

   -webkit-box-shadow: inset 0 0 10px #000000;

   box-shadow:         inset 0 0 10px #000000;

}

.paratraf

{

     font-size:20px;

    font-family:&#39;georgia&#39;;

    text-align:center;

color:#000;

}

.feed-links{display:none;}

.enteremail

{

   background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;

    border-radius: 4px 4px 4px 4px;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;

    color: #8B8B8B;

    padding: 10px 40px;

border-style:solid;

 border-width:2px;

 border-color:#CACACA;

}

.forspace

{

    padding:15px;

}

.button45

{

     background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    color: #FFFFFF;

    cursor: pointer;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-weight: bold;

    padding: 10px 40px;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

    background:#249334;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    color: #FFFFFF;

    cursor: pointer;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-weight: bold;

    padding: 10px 40px;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

}

</style>
<div class="subscriptionboc">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">For Latest news And Updates Sign Up</div><p>         <div class="forspace">
            <center>
                <input class="enteremail" type="text" style="width:140px" name="email" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}"/></center></div>
        </p>
   
        <input type="hidden" value="truebloggertricks" name="uri"/>
   
        <input type="hidden" name="loc" value="en_US"/>
                    <center>
        <input class="button45" type="submit" value="Sign Up" /></center></form>
</div>

• In The above coding replace truebloggertricks with your feedburner username

• Thats All Save The Widget

Posted by Guest Author,Rajat Garg
Hello This is Rajat ,from India, I like to explore the ways of blogging, smart earning methods,Likes to clone templates.
Visit My Blog My Premium Lab | Follow Me On Twitter Or Facebook

Jquery Closable Christmas wishing widget for Blogger

As Christmas is nearing , Every blogger will be thinking of wishing there users and there family.This makes the bloggers to be friendly with there visitors.There are many christmas decorative widget for blogger which can make your blog to load slow and give ugly appearance.That goodies also make your post unreadable to your users .Do you want to wish your users or make them to get away from your site??

So to avoid this, I camed with a new widget which wishes your users beautifully and attractively.This is fast loading and does not increase your blogs load time.This widget is user friendly as it comes with closeable button too.This also make your blog professional! Live preview can be viewed in this blog.want on for you blog also? Just follow these simple steps.

How to install this widget in your blog?

• Go to Blogger.com and open your dashboard.
• Go to layout menu and open a new desirable widget box and paste this codes in that.

 <style>

/*--Widget by truebloggertricks.blogspot.com--*/

#announcement{
width: auto;
font:bold 15px Trebuchet MS;
border: 2px solid #FF0000;
border-radius: 20px;
margin: 0 40px 5px 40px;
text-align: center;
padding:15px 10px 15px 70px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #FF0000;
background-color: #F9EAD4;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtAD1NwuwZRJm9hSKNWGCe_2IPf1xUffxWM-ZqndxUicDzgRwnaGRDMFGpXMRrkZ8xzpCmUMuSmyWmYBEqLGwznBUSFlasjF1yZcIhVuHyJwoKNbnKkk_AGkIR-YSvyvVJSbS1xgpLPjA/s1600/two_christmas_bells_ringing_ty_clr.gif');
}
</style>
<script src='http://code.jquery.com/jquery-1.2.3.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".close").click(function(){
$("#announcement").remove();
});
$("#announcement").fadeOut(800).fadeIn(800)
.fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});

</script>
<div id='announcement'>
<a class='close' href='#close' style='float: right;'><img border='0' src='http://cdn1.iconfinder.com/data/icons/nuvola2/16x16/actions/button_cancel.png'/></a>
<center>
Wish You a Merry Christmas to All our Visitors and Their Family.
</center></div>

Or you can use this easy install option.Just click and install this widget in your blog.

Thats all!!. We whole heartly wish a merry and happy Christmas to you and your family members. You can also share your wishes via comments.  

Ice Cream Social Sharing Widget below blogger Post

This post is written by our guest author.Check how to become a guest author in True Blogger Tricks

For our dear visitors we created a very awesome and professional social sharing widget for blogger which can you add below every post  of your blog and it works perfectly with blogger and you can also add it on your other websites like Wordpress, Joomla, Webs, etc.This Widget contains a spinning effect on mouse hover.

Add Social Sharing Ice Cream Widget

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below. 

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

• If you can't find above code then Search below code

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

•  Now Paste Below Code Just After after it.

<b:if cond='data:blog.pageType == "item"'> <style> p#socialicons img { -moz-transition:all .7s ease-in-out; -webkit-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; -ms-transition:all .7s ease-in-out; transition:all .7s ease-in-out; } p#socialicons img:hover { -moz-transform:rotate(50deg); -webkit-transform:rotate(50deg); -o-transform:rotate(50deg); -ms-transform:rotate(50deg); transform:rotate(50deg); } </style> <center><p id='socialicons'> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj9UR9lHwNPhuXQAFl6vIY3jaUTEDaJ2WDAjUv_W9XTP79fabG7f1yfFwGc29b3jst7zc9pc7-nLZlihQnZyc9AYj2p0k_dtjAxPIJ8Z6Rx3W26P4-KBtzKVf0H3kSsEQF5NlyWjIIOAP5/s1600/facebook.png' title='Share on Facebook'/></a> <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZ_IBhqewrLPPR6kgek3RZ_9ItaLyFgLHdTGJSheGwiUHF7v85WC_HubfDqJmZ6hrAvQZIG___eeHjdwXXAx2n4fwwM23aPUODlDtJneBYl0ihT8h2Cg0pt5nghHNBUGiEI6OZCn42Hfm/s1600/twitter.png' title='Share on Twitter'/></a> <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hPy5HMLxJ6XMVjDhElaXvDGskGBdvkZlmmQvW-2VcFDpOZ2NAempNOWIgR6f6PpEFA8TwQk9zKDmfQeDvZrjoWmgtB33YnvcOqMnlde7ydgmjAiSttrjFwDpEQxwI_MeTB7DT1dLjbwk/s1600/digg.png' title='Share on Digg'/></a> </p></center></b:if>

• Save Your Template.
• Say Bingo and You are Done.

Posted by Guest Author,Hemant Verma
Hello This is Hemant Verma ,from Delhi, I like to make blogger hacks, Design Blogger template, Web Developing and Designing.
Visit My Blog Widget Generators | Follow Me On Twitter Or Facebook

11 things that makes your visitors to hate your blog

Do you want your visitors to stay on your blog for a while and read your posts? I bet you do. That is why you should know these 11 mistakes that drives your visitors away in less than two minutes. Avoid them and your visitors will enjoy their stay and come back again in future. Making your visitors annoyed quickly is never a good idea for a blog / website, you know. Especially when it's growing.Try to follow these rules in your blog.

 

1. Using large or too many graphics or pics: loads slow

Large and lots of graphics cost bandwidth and and make your site slow to load. If the load time is beyond your visitors' limit of acceptance, they will get impatience obviously. Thus resulting in their leaving at once, and that is not something you want. If a larger image is needed to describe your content, provide a link like "click here to view in larger size" or something. Therefore, the slow loading only occur when your visitor wish to see the larger image. Bigger size is not always better, dude.

2. Playing music or video automatically: irritating

Have you ever visited a website or blog that plays music automatically without your agreement? What do you feel? 9 of 10 people will get annoyed and quickly close the tab or window to silence it. If you have a plan to add sound effect or music to your site, don't do it, just don't. That's why they created Winamp, so that people can listen to music WHEN they want it. Don't force them to hear it from your site, that's bad.

3. Using bad formatting styles / template 

 
Very simple: if your site is not friendly on the eyes, visitors will feel uncomfortable. It will drive them away fast, especially when the formats break into each other like crazy. Therefore, decide your format / template early and stick with it. There are a lot of free web templates out there that look tidy and good, don't say you can't afford them.

 

• Checkout our premium templates that make your blog beautiful!

4. Using poor background color or image: text hard to read

 Poor background color or image will make your text hard to read, and it is certainly annoying for your visitors. They will leave in half a minute. Improve your site's readability to make your visitors comfortable to stay. Light background is good with dark texts, and vice verse. Your target visitors are not super-men with their super vision, are they?
 

5. Wrong Information And Broken Links

You don’t have to ensure the accuracy of the information on your posts. I mean who has so much time to do researches just to make sure that the facts and figures are correct. An estimate would do fine. A little exaggeration wouldn’t hurt either.
And forget about checking all those links to see if they really work. If you want to move the pages around, by all means do it freely. “Error 404 Page not found” is just a few things that reader should put up with and not get all upset over it.

6. Writing too long posts: boring

No one likes someone who talks too much, and it also applies in blogging. Most internet surfers are modern type of people, and in this modern day, people have lots of things to do. Therefore, if you think people will have the time to read long babbling posts, you are wrong. Always make your articles comprehensive and don't extend them over and over.

 

7. Using elements that blink, bounce, or scroll: distracting

Unless your website or blog is for kids, it is a bad idea to have these elements. They will distract your visitors from your message, reducing your communication effectiveness. Whatever you do, always limit or remove distracting elements from your site. Less is more my friend, less is more.

8. Using poor opening on the posts: negative first impression

Some people tend to open their post lamely, and that is totally bad for visitors. For example, if you are going to write a post about computer technology, don't open it by telling what activity you did yesterday, which has nothing to do with the topic.

9. Putting excessive advertising and inline ads

Few ads will make your website looks more professional, but putting too many of them will distract your visitors from your content. It also has a big chance to irritate your visitors and drive them away quickly. You won't get more money from ads if they are annoying for your visitors. Don't look like you desperately wanting money, it's not too good for your brand.

10. Putting a registration page

Trust me folks, it will not make the visitors register. Instead, it will drive them away instantly. Time on site and bounce rate will show it, if you use some traffic analytic. If you really really want to ask people to register to your website, you better offer them something worthy registering. Otherwise, those who have registered may curse you because they feel deceived.

11.Bad fonts : irritating

Fonts play a major role in the blog design.Apply fonts that are easily readable to users. Dont use hard fonts to make blog unique from others.Dont use more than 3 types of fonts within a post.Fonts make your readers to read your post again and again!!

What kind of annoyance do you hate the most from a website (based on your experience)? Let's share on the comment box below.

How to create a flash banner without any ad in Flashvortex

Flashvortex is a free service used to create high quality flash banners for free.But there is a ad link to Flashvortex.com which does not makes the banner professional.You can remove the flashvortex ad

by becoming a premium member.You spend dollars for it But I am going to reveal a trick to remove flashvortex banner without any cost.Lets see how to do it.

Live Demo :

Without removing the ads

Ads removed

Step 1:

First you need to download  SWiX flash editor software

• Full support of Flash format version 5, 6, 7, 8, 9 and 10
• Decompiling of SWF into SWiX-format XML
• Syntax highlighting, code formatting, code completion
• Preview of modified SWF files
• Reassembly of SWiX-format XML into an SWF
• Open XML based SWiX-format as a ZIP archive
• Multidocument interface

Version     1.3.0.1927 new
License     Free for personal use
Build     March 24, 2010
File size     0.9 MB
OS     XP/2000/Vista/Windows 7

Step:  2

1. Go to flashvortex.com
2. choose any Flash Banner from list
3. Fill the Following form with Required Data
4. Click on "Generate Animation"
5. Click On "Click Here To Download" Button To Download swf File On your PC

6. Open your swf file with SWiX
7. Go to view at the top options and Select on Movie XML

 

Now using Ctrl + f find these below codes

<Actions>
                <Push>
                    <String Name="http://www.flashvortex.com/referer.php?generatorId=" />
                    <String Name="generatorId" />
                </Push>
                <GetVariable />
                <Add2 />
                <Push>
                    <String Name="&amp;exampleId=" />
                </Push>
                <Add2 />
                <Push>
                    <String Name="exampleId" />
                </Push>
                <GetVariable />
                <Add2 />
                <Push>
                    <String Name="_top" />
                </Push>
                <GetURL2 LoadVariables="false" LoadTarget="false" SendVarsMethod="None" />
                <End />
            </Actions>

Delete the above codes.You have remove the link to that site.

• Now find below codes individually

 Shapeid="4"

Shapeid="7" 

•  Both occurs in different places.Replace the above two codes with this

 Shapeid="0"

Thats all ! You have removed the flashvortex ad !

Uploading :

• Open http://sites.google.com , sign in/sign up with your Gmail account.
• Click on edit sidebar at left side of page.

• Click on Attachments-->>>Upload-->>Select your SWF file from PC and upload it. 

• Now you have uploaded the Flash SWF file to Google site, you should get the URL address of the SWF file and note it. In Internet Explorer, you can simply click the file, open it with IE, and copy the link address in the address bar. 
• If you are using Firefox, you may right click on download link and choose copy link location

After copy link location your SWF file URL look like this :

https://sites.google.com/site/templatedownloadzone/home/truebloggertricks.swf?attredirects=0

but you can't use this , just remove last red colored code and after all your SWF file URL look like this:

https://sites.google.com/site/templatedownloadzone/home/truebloggertricks.swf

How to Embed SWF file ?

• Replace YOUR SWF LINK with your link of .Swf file copied .
• Replace height and width with your own banner size.

<embed align="middle" allowscriptaccess="always" height="250" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="YOUR SWF LINK" type="application/x-shockwave-flash" width="500"></embed> 

How to use this ?

You can copy the code and paste in desired widget box or inside the post to view this ad free flash banner.

If you face any problems just comment below.I will help you regarding this

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!

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 add unique like and tweet box for all post in blogger homepage

Today, this easy tutorial will guide you "How to Add Facebook Like and Twitter Tweet Buttons Box On Every Single Post On Blogger Blog Homepage?". I am sure your readers will like these buttons on your blog. Because social networking is the most powerful way for increase traffic to your blog.

Facebook Like, Twitter Tweet and Google +1 are the three main online systems for spreading your post all over the world, more likes and tweets you have more post is shared and you will get more views. Make your blog more attractive by adding these buttons with the help of simple CSS code.

How to Add Like & Tweet Box On Every Single Post On Blogger Homepage

• Go to Blogger Dashboard > Template > Edit HTML > Proceed
• Take Backup Of Your Template Before Make Any Changes
• Now Click Expand Widget Templates and Press Ctrl + F and Search For ]]></b:skin> Code and Paste The Below Code Right Above It.   
  
  

   .post-homepage-share{box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;-moz-box-shadow: 0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:right;width:130px;height:65px;background: #f9f9f9;border:1px solid #ddd;margin:5px 0 0 10px;padding:5px 10px 2px 0}

• 3. Now again make a search for <div class='post-header'> and paste the below code right below it.

<b:if cond='data:blog.pageType != &quot;item&quot;'><div class='post-homepage-share'><span style='float:right'><a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'/></span><span style='float:right;padding-right:5px'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='false' expr:href='data:post.url'/></span></div></b:if>

• If you already had facebook and twitter pulgin avoid this step.Place this code before </head>

 <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Now codes are placed and you can save your template, now refresh your blog and see if like and tweet box has loaded or not, if you think that the box is getting too much up or too much low you can change the margin value in the above code in red color.

Note : Using these Like and Tweet for every single post on your blog may make your blog a little slow, as everytime a person loads your homepage additional requests for like and tweet buttons will be carried out so try using it if it fits best than enjoy :)

Spiceupyourblog like comment design in blogger

Spiceupyourblog is a beautiful blog with unique design.Paul crowe is owner of that blog.I also shared spiceupyourblog template in previous post. In this tutorial you will learn how to make your blogger comment system design like on Spiceup your blog.
SYB is well designed by Paul Crowe. But the comment system design is one of the best thing we find in SYB, the design and it's look makes the comments easier to understand. 

 

You can also see the Demo here

DEMO 

To make this type of comment system is very simple.Just you have to do 2 steps

• Enable threaded comment in your blog
• Applying CSS in your template

Enable threaded comment in your blog:

1. Blogger Dashboard > Select the Blog that you want to enable the Threaded Comments
2. Go to Settings > Posts and Comments
3. Comment Location option set to Embedded
   
4. Go to Settings > Other 
5. Allow Blog Feed option set to Full
   

Still not getting Threaded Comments?

Backup your Template before going to change any thing.

Method 1:

You will lost all Changes in Blog Posts and Widgets. like, Adsense Ads inside Post,Post Footer changes, Share Buttons, Signatures etc,.!!

1. Go to Design > Edit HTML
2. Click on Revert widget templates to default link

This will Discard the all Changes Widget and revert to Default. This is Best suitable for non Custom Templates.

For Custom Template Follow the Method 2

Method 2:

1. Go to Template > Edit HTML
2. Click on Expand Widget Templates Check box
3. Find the Following code.
   

   <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='comments'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:include data='post' name='comments'/> </b:if>

4. You will get Two results. one is belongs to mobile template and other is belongs to web Template.
   Replace it with the Below Section of Code on both mobile and web template.  
   
   

   <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if>

5. Save the Template!

Applying CSS in your template :

It can be done easily with CSS. You can make changes to the CSS if you understand what you are doing or you may just ignore making any changes. Follow these Instruction to add this long CSS

1. Go to Blogger Dashboard 
2. Now click on the Template tab
3. Click on the Customize button
4. Select the Advance tab > scroll down and Add CSS 
5. Now you will see a textarea on right side, this is where you have to paste the HTML
   

   @font-face { font-family: 'Philosopher'; font-style: normal; font-weight: 400; src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } .comment .avatar-image-container { border: 1px solid #B6B6B6; max-height: 70px !important; margin-top: -5px; width: 70px !important; position: relative; z-index: 50; } .comment .comment-block { margin-left: 75px !important; } .comment .comment-header { background: none repeat scroll 0 0 #A9F5D0; color: #333; font-size: 15px; font-weight: bold; margin-left: 60px; } .comment .comment-header a { color: white !important; text-decoration: none; } .comment .comment-content { background: none repeat scroll 0 0 #FEFFF9; border-bottom: 2px solid #E6E6E6; font-size: 14px; margin: 0 0 30px; padding: 5px 5px 10px 10px; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment-header cite { background: none repeat scroll 0 0 #DF7401; border: 1px solid white; color: white; padding: 2px 20px; position: relative; z-index: 99; margin-left: -20px; } cite.blog-author { background: none repeat scroll 0 0 #8181F7 !important; } .icon.blog-author { display: none !important; background: url("") no-repeat scroll 0 0; margin-left: 90px; width: 60px !important; height: 60px !important; position: absolute; right: 5px; bottom: 5px; top: 10px; } .comment .comment-header { color: #333; font-size: 15px; font-weight: bold; } .comment .avatar-image-container img { border: medium none !important; height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD !important; color: #333 !important; display: inline-block !important; line-height: 1 !important; margin: 0 3px !important; padding: 3px 6px !important; text-decoration: none !important; font-size:16px; } .comment .comment-actions a:hover { background: #CCC !important; text-decoration: none !important; } .comments { font-family: 'Philosopher', arial, serif !important; font-size: 1em; color: black; } .comments .continue a { display: block !important; font-weight: bold !important; padding: .5em !important; color:#E34600; font-size:16px; } .comments .continue a:hover {color:#4D3123;text-decoration:none;} .item-control { display: none !important; } .comments .continue { border-top: 2px solid transparent !important; }

Then open your blog and see the comment system.If it does not works for you,please comment below.

How to change Comments Avatar Image size in blogger

This is a Quick Trick to Show the Blogger Comment Avatar Image Properly. I saw in many blogs Comments avatars. those are Improper in size. This is because of the CSS of both Default Comments System and Threaded Comments. which are present in your template and showing the avatar image improperly. here is the Quick Tip with css to Reset the Avatar image and Style the Image.

 

How to Fix The Improper Blogger Comments Avatar Image?

This is Reset CSS for Comment Avatar Image and is works for both Default Comment System and Threaded Comments System.

1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. Search for ]]></b:skin> and place the below code before it! 

.avatar-image-container,
.avatar-image-container img{
 max-width:50px !important;
 width:50px !important;
 max-height:50px !important;
 height:50px !important;
 padding: 0 !important;
 border:0px;
}

Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.

How to Rounding the Blogger Comment Avatar Image?

In comment someone asked me to Rounding the Avatar image in blogger comments. here is the CSS for it!

this css will reset the avatar size to normal and rounds the Image.(so don’t use the above CSS)
Search for ]]></b:skin> and place the below code before it!

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}

.avatar-image-container{
 border:3px solid #fff !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.

If this post is helpful to you? then please share it! Thanks!.
Leave your comments. →