Showing posts with label blogger_tricks. Show all posts
Showing posts with label blogger_tricks. Show all posts

Wednesday, 4 June 2014

Add apple styled navigation menu bar in blogger

Add apple styled navigation menu bar in blogger
Apple styled navigation menu bar looks very attractive and enhances the look of your blog. It is fast loading and SEO friendly so your blog doesn't face slowdown problems with this navigation bar. This apple styled menu bar looks like the navigation bar as on Apple's official website. So, do you want to add it in your blog? Let's see the steps to add this apple styled navigation menu bar in blogger:
  • Login to your blogger account and go to Template > Edit HTML
  • Now, find ]]></b:skin> in the code (you may use ctrl+F keys to get the search bar within the code editor) and paste the following code just before it.
#applenavbar{-moz-border-radius:4px;-moz-box-shadow:0 3px 3px #cecece;-webkit-animation:showMenu 1s;-webkit-border-radius:4px;-webkit-box-shadow:0 3px 3px #cecece;border-radius:4px;box-shadow:0 3px 4px #8b8b8b;font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;font-size:13px;height:34px;letter-spacing:-.5px;list-style:none;margin:40px 0;position:relative;text-shadow:0 -1px 3px #202020;width:980px}#applenavbar li{background-color:#5f5f5f;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);border-bottom:1px solid #575757;border-left:1px solid #929292;border-right:1px solid #5d5d5d;border-top:1px solid #797979;display:block;float:left;height:34px;width:105px}#applenavbar li:not(:last-child):hover{-moz-box-shadow:inset 0 0 5px 5px #535353;-webkit-box-shadow:inset 0 0 5px 5px #535353;background-color:#383838;background-image:0;box-shadow:inset 0 0 5px 5px #535353}#applenavbar li:not(:last-child):active{-moz-box-shadow:inset 0 1px 2px 2px #000;-webkit-box-shadow:inset 0 1px 2px 2px #000;background-color:#383838;background-image:0;box-shadow:inset 0 1px 2px 2px #000}#applenavbar li a{color:#FFF;display:block;line-height:34px;outline:none;text-align:center;text-decoration:none}#applenavbar form input{-moz-border-radius:10px;-moz-box-shadow:inset 0 2px 1px 1px #363636;-webkit-border-radius:10px;-webkit-box-shadow:inset 0 2px 1px 1px #363636;background-color:#6E6E6E;background-image:url(, 0;background-repeat:no-repeat;border:none;border-radius:10px;box-shadow:inset 0 2px 1px 1px #363636;color:#eee;height:20px;margin-left:9px;margin-top:8px;padding-left:20px;padding-right:10px;width:76px}#applenavbar li:first-child{-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;border-left:none;border-radius:4px 0 0 4px}#applenavbar li:first-child a img{margin-top:-2px;vertical-align:middle}#applenavbar li:last-child{-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;border-right:none;width:124px}to{opacity:1}
  • Now save your template.
  • Its time to add the apple styled navbar at any place you like. So, just go to blogger LAYOUT section and Add A New HTML/Javascript widget.
  • Now paste the following code in the empty html widget box and save that.
<ul id="applenavbar">
<li><a href="" title="Apple"><img src="" alt="Apple Logo"/></a></li>
<li><a href="" title="Store">Store</a></li>
<li><a href="" title="Mac">Mac</a></li>
<li><a href="" title="iPod">iPod</a></li>
<li><a href="" title="iPhone">iPhone</a></li>
<li><a href="" title="iPad">iPad</a></li>
<li><a href="" title="iTunes">iTunes</a></li>
<li><a href="" title="Help">Help</a></li>
<li><a href="" title=" "> </a></li>

Note : Change the # with your url and green color text with your own text and save the widget.
  • That's it. Arrange the newly added widget at any desired place and save the layout. Now open your blog and see the apple styled navigation menu bar in action.
Keep visiting for more tips and tricks.

Saturday, 31 May 2014

How to change the mouse pointer in blogger blogs

How to change the mouse pointer in blogger blogs
I love blogger because it provides an awesome support to edit and customize the templates of blogs hosted on it. By adding new codes, we can make cool changes in our blogs and can make them look better. In this post, I'll tell you a simple method to change the mouse pointer in blogger blogs, means whenever anyone opens your blog, he will see that his mouse pointer looks different while surfing your blog pages. So, lets start the tutorial on changing the mouse pointer in blogger blogs:

1. Login to your blogger account and go to Template > Edit HTML
2. Now search for </head> and copy and paste the below code just before </head> tag.
<style type='text/css'>body,a,a:hover{cursor:url(,progress}</style>
3. Now just change the red colored url from the above code with your own cursor url and save your template.
4. That's it. Now if you open your blog, you see your new mouse pointer.

Note: You can use cursors with .cur OR .gif extension.

Saturday, 26 April 2014

How to host codes in google drive

How to host codes in google drive
You might have hosted your codes in google codes, but now google codes has discontinued its service of uploading codes. So, as an alternate option, we can use Google Drive to upload our codes. Using a small trick, you can upload your codes to google drive and get a direct link of the uploaded code to use with web projects. Let's see how to host codes in google drive.
1. Login to google drive.
2. Now click "Upload" button and click "Files".

click file

3. Now upload your CSS or JavaScript file.

uploading codes

4. After uploading the file, it will appear in your google drive. Just right click on the uploaded file and click Share > Share.

sharing code

5. A window will popup now. From that window, click "Change..." link.

sharing settings as public

6. Now set the visibility option to "Public"and then click "Save" button.

sharing codes as public

7. Now, let's convert the link of the uploaded file into the direct link to use it in webpages to add external codes. Just copy the part of the code url as shown in the image below.

copy the part of the code as shown in image

8. Now, replace the copied code with xxxxxxxxxxxxxxxxxxxxxxxxxx in the following code:

9. Now you have the direct link for your hosted code. To use it in your webpages, use the following codes:

For CSS : <link href="#" rel='stylesheet'/>
For Javascript : <script src='' type='text/javascript'></script>

10. That's it. Enjoy web designing with google drive. :)
Keep visiting for more tips and tricks. Have a great time.

Add Recent Comments Widget In Blogger

Add Recent Comments Widget In Blogger
Hello friends, I have provided so many blogger tutorials in my blog. In that category, here is one more addition. In this tutorial, I'll tell you how to add a recent comments in blogger blogs. This widget works perfectly without decreasing the loading speed of your blog. So, let's start the tutorial:
1. Login to your blogger account and go to "Layouts" section.
2. Now click "Add A Gadget" where you want to add this widget.
3. Now copy the following code and paste it in the widget box.

<script style=text/javascript src=""></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src= ></script>
<a style="display:none" href=>Recent Comments Widget</a><style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}

Note: Replace the red color text with your own blog url.
4. Now, save the widget and see it live in your blog.
Keep visiting for more tips and tricks. Share this post with your friends.

Tuesday, 22 April 2014

How to submit blogger blog sitemap to google webmasters tools

How to submit blogger sitemap to google webmasters tool
To get more search traffic on your blog, it is necessary to submit your blog's sitemap to google webmasters tool. But to submit blogger blog sitemap, we need an xml file of the sitemap and have to upload it in the root directory of the domain. But for blogger, it is not possible to upload a custom sitemap.xml file with the domain because blogger doesn't offer to host external files and that's why you are limited to link external files with your root domain.

Recommended : How to create sitemap page for blogger blog.

But no need to worry, we have already an xml file with our blogger blog's domain which may work as a sitemap, atom.xml. But this sitemap can submit only 26 recent posts. Then what to do...??
Well, using a small tweak, you can use the same atom.xml file to submit all your blog posts into google webmasters tool. Let's see how.

Submit Blogger Sitemap To Google Webmasters Tool

1. A sitemap can contain maximum of 500 posts. So, if you have number of posts less than 500, then you have to submit only one sitemap to index your posts. But if you have posts more than 500, then you have to submit more than one sitemaps in google webmasters tool. Here is how you can get your blogger blog's sitmap link:
From the above url, replace the red color text with your own blogger blog url and copy the whole url. You can use this url as a sitemap.
2. Now, login to your google webmasters tools account and click your added site's url.

click the blog url

3. Now, from the left sidebar, click Crawl > Sitemaps option.

crawl > Sitemaps

4. Now, click "Add/Test Sitemap" button.

add a sitemap in google webmasters tools

5. Now we are at the last step. You will see sitemap submission box. Just add the following line in the box and click "Submit Sitemap" button:

add url and click submit sitemap

6. That's it. Now you can see that your blogger blog's sitemap is submitted in google webmasters tool and after indexing, you will see the status of your indexed pages.

blogger blog sitemap submitted

Note: If your blog has more than 500 posts, then after submitting this sitemap, submit another sitemap using the following link:
In the same way, keep adding the sitemaps according to the number of posts in your blog.

Keep visiting for more tips and tricks and share this post in your social media accounts using the sharing buttons below. Don't forget to subscribe to our newsletter to get our updates in your mailbox.

How To Create Sitemap Page For Blogger Blogs

How To Create Sitemap Page For Blogger Blogs
Sitemap submission is a good way to tell search engines about your site contents without pinging them regularly. For a normal website, you can generate sitemaps using free sitemap generator tools. But for a blogger blog, the default sitemap file (atom.xml file) contains only 26 most recent blog posts. So, if you submit it in the webmasters tool, your all posts don't get indexed.
In this post, I'll tell you how to create a sitemap page for blogger. Actually, it's not a sitemap, but a list of posts filed under the particular labels, but for search engines, it works as a sitemap. You can't submit it to webmasters tool. So, let's see how to create your sitemap page for blogger:
1. Login to your blogger account and from the dashboard, go to PAGES option.

from dashboard, click PAGES

2. Now click "New Page" button to create a new page.

click NEW PAGE

3. Now Page Editor will open. Just click "HTML" button to start editing in html mode.

click HTML

4. Now copy the following code and paste in the HTML editor. Then give the page name "Sitemap" and then click "Publish" button to publish your page.
Code for blogger sitemap:
<div dir="ltr" style="text-align: left;" trbidi="on">
<script src=""></script><script src=";alt=json-in-script&amp;callback=loadtoc"></script> </div>

Note : Change the red color text in the above code with your own site url.

paste the code and publish the page

5. That's it. Now your sitemap page is ready. Open and view it.

Recommended Reading : Submit Blogger Sitemap To Google Webmasters Tools

Keep visiting for more tips and tricks.

Saturday, 19 April 2014

How to schedule blogger posts to publish on a later date

How to schedule blogger posts to publish on a later date
Blogger is a nice platform to write and publish articles in your blog. It is easy to use and have nice interface also. You might be publishing a few articles daily if you are a blog owner. Well, suppose you have to go outside from your home and you don't get any computer a few days, then how will you write articles in your blog? You may use your mobile, yes I know, but what if you don't have network access also, then?
You will not publish anything in your blog and it will be inactive until you come back home, right? But do you know, you can schedule your articles to be published in your blog at a later date! Yes, you can write your articles and can schedule them to be published on a specific date automatically, without logging in to your account. Let's see how to schedule blogger posts.
  • Login to your blogger account.
  • Now write a new post.
  • After finishing with writing the post, click "Schedule" from the right sidebar under the "Post Settings".
  • Now select "Set date and time". A calendar will appear now.
How to schedule blogger posts to publish on a later date
  • Select the date and time on which you want your post to be published automatically and then click "Done".
  • That's it. Now publish your post. Your post will be automatically published in the date and time you scheduled.
Keep visiting for more tips and tricks.

Thursday, 17 April 2014

Metro Style Social Media Widget For Blogger

Metro Style Social Media Widget For Blogger
Social media widgets are recommended for bloggers to engage their visitors in their social media pages. If you have a facebook page, twitter profile, google+ page etc for your website/blog, then you can put their subscription links in a stylish way using social media widgets. In this post, I'll tell you how to add a metro style social media widget in your blog. Just follow the steps below:
1. Login to your blogger account and from the dashboard, go to LAYOUTS section.
2. Now, add a new HTML/Javascript widget and paste the following code in that:

.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url( no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url( no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url( no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url( no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url( no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url( no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url( no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url( no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url( no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url( no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url( no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url( no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url( no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url( no-repeat center center #e9a01c}
<div class="metro-social">
<br />
<li><a class="facebookbt" href=" FACEBOOK PAGE LINK" target='_blank'></a></li>
<li><a class="twitterbt" href=" TWITTER ACCOUNT LINK" target='_blank'></a></li>
<li><a rel='author' class="googleplusbt" href=" GOOGLE PLUS LINK" target='_blank'></a></li>
<li><a class="pinterestbt" href=" PINTEREST LINK" target='_blank'></a></li>
<li><a class="linkedinbt" href=" LINKEDIN PROFILE LINK" target='_blank'></a></li>
<li><a class="youtubebt" href=" YOUTUBE CHANNEL LINK" target='_blank'></a></li>
<li><a class="rssbt" href=" FEED URL" target='_blank'></a></li>

3. Replace the red text with your own social media links and then save the widget and save the layout.
4. That's it. Open your blog and see the live preview of your metro style social media widget.
Keep visiting PC Tricks Guru for more tips and tricks.

Tuesday, 15 April 2014

How can you say that you are a Pro Blogger

How can you say that you are a Pro Blogger
"Pro Blogger", you might have came across this word if you are in blogging field. You have seen that every newbie starts a blog and start calling himself a "Pro Blogger". This is disgusting. Actually 80% of bloggers don't know the real definition of Pro Blogger. So, I decided to write this article to explain what actually the term Pro Blogger means.

The definition of Pro Blogger or Professional Blogger is "Any blogger who totally depends on blogging for his income", according to Google. Or you may say that a Pro Blogger is the one who does blogging on a full time basis and earns his livings through it. But, this term is not as simple as it seems to be. Here are some points for a pro blogger:

1. You treat your work with respect and care

Don't treat your blog as a place where you work for time-pass. Some bloggers say that they do blogging because blogging is their hobby or blogging is fun for them. For a professional blogger, blogging is not a fun, they treat is seriously. If you say that blogging is your passion or blogging is a fun for you, then you are spoiling your image as a blogger. Give your blog full respect and do hard work for it and be honest for your blog. Some bloggers say that they do blogging to make their blog popular and when it becomes popular, they will sell it to earn some money. This thought is also a silly thought. A Pro Blogger treats his blog as a very important thing for him which he can't sell to anyone just for some money.

2. Think well before leaving comments on other blogs

When you visit other blogs, you find a nice amount of comments, and 90% of them are made to build backlinks and for the purpose of promotion. You will never find comments of Pro Bloggers anywhere because Pro Bloggers avoid spamming (now you can understand why you never find my comments in other blogs, except some high quality blogs). Pro bloggers leave very less comments on old blogs with high quality content, and their comments are valuable and meaningful for admin as well as the readers. They comment for genuine reasons and for any suggestions which are really important, not for building backlinks or for the purpose of spamming.

3. See your every social media activity as your digital footprint

If you see a Pro Blogger's social media profile, you find that he keeps his connections engaged with him. He shares his life events, sometimes he makes jokes and post some funny things to make his followers laugh, sometimes he talks about some social issues and asks for the opinion of others etc. You will not find that he floods his profiles with the links from his blog because he knows that his social media profile is his virtual social life. He lives his life in his own ways and his social media profiles reflect his real life also. But most of the bloggers keep sharing their blog links in their social media profiles which damages their blogger image. I'm not saying that you share every moment of your life, such as "drinking coffee in a hotel", "going for lunch", "going to sleep" etc. These are silly things. Update some meaningful things which reflect that you are a professional blogger or a professional person, such as "Made some corrections in my blog design, waiting for some feedback", "Attended the seminar of XXXXX, that was great being their. Learnt a lot of things", "Going to XXXXX university, feeling excited to meet the youth there" etc. These type of social media updates create a good impression in the mind of your followers and they will feel attached with your life because these updates keep the audience involved with your activity.

4. You've received press releases by national and international media, invited to brand hosted events

A pro bloggers doesn't boast on him. He earns the faith and respect by his honest and high quality work. And this can be proved by his real life activities. If you have not received press releases (in national and international media) or invited to brand a hosted event, then you can't say yourself a Pro Blogger (that's why I never write that I'm a pro blogger, because I've conducted only small seminars in some colleges locally but never branded any hosted event or did any event on national and international level). Some bloggers publish paid articles about them in local newspaper or get them featured in local TV channels, but it doesn't mean that they are Pro Bloggers. Pro bloggers are featured at national and international level and they are invited by top and reputed media with respect, not against any money.

5. You are making your livings from your blog

If you are making your livings from your blog, then you may call you are a Pro Blogger (but all the qualities mentioned above are also required). Some people just create a free blog, publish 2 or 3 posts and start calling them "A Pro Blogger", even they don't earn a single penny. This makes me laugh, but it's not their fault. Since the past 2 years, I've seen a high bounce in the amount of teens who are are creating blogs and calling them a Pro Blogger. They have imparted a wrong image of Pro Bloggers. That's why most of the college going students start blogging and feel proud calling them Pro Bloggers. Even some new bloggers start publishing interviews of these bloggers with a label of "Pro Blogger Interview", how silly...!! That is the reason why any newbie calls himself a "Pro Blogger" because they don't understand the actual means of the term "Pro Blogger".

6. You've denied to some ads or to review some items because they are not fit for the audience

This is also a great quality of a Pro Blogger. Some companies want their products reviewed by bloggers and published in their blogs. Some advertisers offer some money to show some ads which are useless for audience (I also get so many "download button" ads to put in my blog in post body, but I simply deny them coz they are totally useless and misleading). Any normal blogger will accept the proposal because they get money for that, but for a pro blogger, audience are more important and they can't put any content which is not suitable for his audience.

7. You spend your time in interacting with your community also

Pro bloggers don't have much time to interact with other people, but from their busy schedule they manage some time to interact with his audience. They reply to the comments on their blogs, they respond to the emails they've received. But this doesn't mean that they reply to every comment, for example, if you've commented "Hi", then don't expect "Hello" from their side. Even your comment may be deleted by them. Pro Bloggers allow meaningful and useful comments on their blogs and respond to them only.

These were few points to clear what actually a Pro Blogger is. Finally, I'd like to tell you the top lessons to learn at blog world:
  1. From the 1st day, take yourself seriously and treat your blog like a business. Take care of the views of your audience also.
  2. It takes more than 3 years to achive the qualities of a Pro Blogger. So don't misguide other people calling youself a Pro Blogger. You may use the word "Hobby Blogger" or just "Blogger".
  3. Have your vision in place before you start out. It makes it easy what you are going to write.
  4. Set your goals before entering into the blogsphere, and plan about every action you take.
  5. Know that sitting in front of your laptop continuously for hours increases the risk of heart disease! (I've gone through this circumstance and my condition got very critical. Due to working continuously on computer the whole day, a wound developed in my lungs and it started bleeding badly. I had to get hospitalized for one month and had to take 24 glucose bottles and 3 bottles of blood from blood bank!)
Here ends this article. If you liked  it, share it with your friends and subscribe to our mailing list.

Monday, 7 April 2014

How to add facebook popup like box widget in blogger

How to add facebook popup like box widget in blogger
Facebook popup like box is a handy widget which increases your facebook page likes and helps in building large number of audience. Using facebook popup like box is a good practice but you must keep it in mind that your facebook popup like box must not appear every time when a visitor opens any page. So you must use cookies to set the appearance of facebook popup like box at a fixed time interval. Now let us see how to add this popup like box in your blogger blog.
  • Login to your blogger account and go to Template > Edit HTML
  • Now, find the code </head> and just before </head>, copy and paste the following code:
<script src=''>
<script src='' type='text/javascript'/>
<script type='text/javascript'> jQuery(document).ready(function(){ if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) { var setDays = 1000*60*60*24*5; var expires = new Date((new Date()).valueOf() + setDays); document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString(); $.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;}); }});

Note: In the above code, is the number of days after which the popup box will appear again to the visitor. You may change it with any value between 1 to 7.
  • Now search for the code </b:skin> and just before </b:skin> copy and paste the following CSS code:
/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay { position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft, #cboxBottomLeft { clear: left; } #cboxContent { position: relative; } #cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url( no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url( no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url( no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url( no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }
  • Now, let's move towards the last step. Find </body> in your template code and just before </body>, copy and paste the following code:
<div style='display:none'>
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'>
<div style='text-align:center;padding-top:15px'>
<h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src=";width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/>
  • Now, replace pctricksguru with your own facebook page username and save your template. Now, you can see your facebook page popup box when you open your blog.
Alternate method to add popup like box in blogger: 
If you are lazy in doing coding work, then you can follow the alternate method. Just go to your blogger Layout section and add a new widget. Now copy and paste the following code:

<style type='text/css'>
#pctricksguru {position:fixed !important;position:absolute;top:200px;left:40%;margin:0px 0px 0px -182px;width:300px;height:auto;padding:16px;background:#FEFEFE;font:normal Dosis, Georgia, Serif;color:#111;border:2px solid #333;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#pctricksguru a.bsclose {position:absolute;top:-10px;right:-10px;background:#fff;font:bold 16px Arial, Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#000000;border:2px solid #333;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:25px;cursor:pointer;}</style>
<script type="text/javascript" src="">
<script type='text/javascript'>
$(window).bind("load", function() {// Animate Top$('#pctricksguru').animate({top:"50px"}, 1000);$('a.bsclose').click(function() {$(this).parent().fadeOut();return false;});});</script>
<div id='pctricksguru'>
<!-- Widget by Start -->
<div align='center'>
<a class="pctricksguru">Like Our Facebook Page </a>
<div align='center'>
<iframe src=";width=295&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:295px; height:258px;" allowtransparency="true">
<!-- Widget by End -->
<a class='bsclose' href="">&times;</a><center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">Computer Tips and Tricks</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="#">Get this Widget on your Blog</a></center></div>

Note: Replace pctricksguru from the above code with your own facebook page username.
Keep visiting this blog for more tips and tricks. Have fun...!!

Tuesday, 4 March 2014

Why Some Bloggers Show Fake Income Reports In Their Blogs

Why Some Bloggers Show Fake Income Reports In Their Blogs
You might have seen that some bloggers show their income reports in their blogs to attract visitors to their blog. They say that they earn thousands of dollars just in one week. After looking at those income reports, you might be thinking that those bloggers are really PRO BLOGGERS and have great knowledge of blogging. I've noticed that in India, 1 out of 4 bloggers says that he is a pro blogger and shows his income reports to make the visitors impressed. But a PRO BLOGGER nevers needs to show his income reports in his blog. He earns a handsome amount from his blog and pays income tax to the government silently.Then why these stupid self called "PRO BLOGGERS" need to show fake screenshots of income report? Let me explain you the reason behind it.

1. To gain attention of internet users

These self called "Pro Bloggers" make fake screenshots of adsense income and other online income reports (you can also do it by using webpage editing javascript and photoshop. AdSense fake screenshot generators are also available online) to gain the attention of internet users. If any person visits their blogs and sees their income reports, he thinks that they are making millions using their blogs and he subscribes that blog and visits that blog regularly to know the secrets of online money making.

2. To increse social media followers

These bloggers try to drive traffic from social media from their followers. So, they show unbelievable amount of their earnings in social media, such as in facebook groups and pages and when any social media user looks at his posts, he immediately follows the blogger either by adding him in friends list or by liking his page. These bloggers purchase fake twitter and facebook followers to make advertisers fool that they have a large social media network. To promote their blogs, they create fake social media accounts also.

3. To do fraud with newbies by selling their useless services:

These self called "Pro Bloggers" try to trap the newbies by showing fake income reports. They say that they will make a newbie earn thousands of dollars within a week or a month if they use their SEO services or blogging coaching. Any new blogger gets impressed by them and pays them money to earn lots of money by getting the services of those spammer bloggers and finally gets nothing.
Actually these spammers work in a team of other spammers who have their own blogs. All of them publish fake income reports saying that after taking the services of XYZ blogger, they are now making lots of money. These spammers publish the blog url of other spammers saying that 'this blogger is my customer and I made him able to earn four figure or even more income within one week or month'.
The innocent newbie blogger believes them and day dreams of being a millionaire and falls into the trap of those spammers. A spammer creates so many fake profiles and create blogs with the name of those fake profiles and try to impress other people saying that those all (fake profiles) are his friends or customers who are making lots of money after joining his blogging coaching and using his SEO services.

4. To get the attention of advertisers

These spammers buy backlinks from high PR sites and buy backlink packages from different companies to get better alexa rankings and to increase page rank of their blogs. Then they purchase traffic from different companies who drive massive traffic to their sites using bots and social media promotion. Then they show that their alexa rankings and traffic is very good to generate revenue from advertisements. These fake reports attract advertisers and they give advertising contracts to these fake bloggers. In this way, they recover their spent amount for building traffic and backlinks.

5. To publicize themselves and their blogs:

When other bloggers visit the spammers' blogs, they get inspired from them and publish the interview of those spammers in their blogs. These interviews increase their publicity and drives traffic to their blogs which gives them more people to do fraud with. Generally, spammers use their fake profiles to promote them and publish their interviews on their self made fake blogs. You will never see the interview of such types of spammers on a well reputed site because the administrators of well reputed and genuine sites know the above points I mentioned in this article.
These things make the spammers popular in their locality and then they try to get the attention of local media to get featured in local newspaper of TV channel to get more audience.


If you know about SEO and Blogging, then it's a thing of common sense that blogging can't make you a millionaire over a night. If taking services or coaching from anyone could make you rich, then there was no need of doing any job or business. People could become rich by taking the coaching of those silly self called Pro Bloggers. Blogging is not a shortcut to make money and making huge amount of money online is not an easy task. It requires knowledge, patience and loyalty.
According to my personal experience, the power of these spammers is their huge network in social media. Actually most of the spammers have good knowledge of the easiest HTML also. They say that you should purchase templates from them because their templates are highly SEO friendly. But do you know what they do? They download templates from different sites (there are so many sites distributing free blogger and wordpress templates), change the credits and background colors and images of the template and sell it to their customers saying that they designed that template which is highly SEO friendly. If you send your own design and tell them to design the template for you, then they can't, sometimes they may heir other web designers to design the template for you, but in most of the cases they try to confuse you that the design you sent can't be good for SEO, the template they are offering is search engine optimized so you must use that template.
At the last, I'd like to say you that blogging can be a good source of making money online, but it is not like the way those spammers represent it. Blogging can't give you millions within a week if you are using it in a genuine way. The only thing behind success in blogging is HARD WORK with a little addition of LUCK.
So friends, don't be excited by seeing fake income reports, work hard on your blog and be loyal with your work. Get inspiration from great bloggers and learn from them instead of running behind the spammers.

Wishing you a happy and successful blogging...

Monday, 3 March 2014

Boost Your Site's Load Speed With Lazy Image Load Script

Boost Your Site's Load Speed With Lazy Image Load Script
Load speed is a very important factor to keep your visitors stay on your website. Researches say that if any website takes it too long to load then visitors leave the site without caring about looking at it. We can increase website load speed by deleting useless codes and hosting the codes on external hosts. You can increase site load speed by optimizing your site's images also. Today, I'll tell you how to boost your website's load speed with lazy image load script.
Using this script, you can force your webpages to show images only on the visible area of the page, i.e. images will load only in that area which appears on the screen and when you scroll down the page, other images will load. Generally when we open a website or blog, all the images are loaded at the same time, but if we use this script, all the images will not load at once, which increases the site's loading speed.

Let's see how to add this script in your blog:

> Login to your blogger account.
> Now go to Template > Edit HTML
> Now search for </head> and just above it, copy and paste the following code:

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"",effect:"fadeIn",threshold:"-50"})})//]]></script>

> Now save your template.
That's it we have to do. Now if you open your blog, you will see that images are loading slowly when they come in the visible area.

Sunday, 2 March 2014

Add Custom Author Box For Guest Posts In Blogger

Guest blogging is a nice way to promote your own blog and get backlinks from other sites. If you write articles for other blogs then your author rank increases and you get more readers for you. You might have seen that in some blogs, there is an author box embedded below blog posts which shows a short bio and image of the blogger. But if you want to show another author box for guest bloggers who are not the part of your team but have written guest posts for your blog, then I'm going to tell you an easy way to add author box for your geust writers.

Follow the steps below:

> Login to blogger.
> Go to Template > Edit HTML.
> Now search for the code ]]></b:skin> and just above this code, paste the following code:
<!-- Guest Post CSS By PC Tricks Guru-->
.pctricksguru-guest img {
.pctricksguru-guest-about {
margin:0 auto;
border:#9ecfff dotted 1px;
.pctricksguru-guest {
border-right:#93C0F9 solid 1px;
.pctricksguru-guest-text {
width: 80%;
font:12px arial,sans-serif;
> Now save your template.
> Now go to post editor and edit the post in html mode.
> Now at the end of the post, paste the following code:
<div class="pctricksguru-guest-about">
<div class="pctricksguru-guest"><img src=" Guest Author Image URL Here" width="80" height="70" /> Guest Author </div>
<div class="pctricksguru-guest-text">
<p><strong>About the Guest Author:</strong>
<br />Add Author Bio Here
> Replace the text Add Guest Author Image URL Here with image url of the guest author and replace Add Author Bio Here with his intro.
> Now publish the post and you will see the author box in that article as shown below:
guest author box preview
Keep visiting for more tips and tricks. Please share this post with your friends and subscribe to our mailing list.

Monday, 20 January 2014

Add Blogger Contact Form In Any Page

Add Blogger Contact Form In Any Page
Contact Form is always very important for any blog or a website. Most of the websites use php contact forms or google docs forms. Recently, blogger announced its official contact form and it works fine but it can be used as a widget in the blog. So many bloggers are still thinking that they can't add blogger's official contact form in any page or post. So I'm creating this article to show you how to customize and add blogger's official contact form in any page or post.

Follow the instructions:

1. First of all, add a blogger's official contact form in your blog. See How To Add Blogger Contact Form.
2. Now, let's hide it. To hide it, go to blogger template editor and just before the </head> tag, add the following code:
<style>#ContactForm1{ display:none!important;}</style>
3. Now create a new page by going to Dashboard > Pages > Create A New Blank Page.
4. Now in html editing mode, copy and paste the following code:
<style>.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-subject, .contact-form-country {max-width: 300px;width: 100%;font-weight:bold;
.contact-form-name {display: inline-block;background: #FFF;background-color: #FFF;color: #A1A1A1;font-family: Arial,sans-serif;font-size: 13px;font-weight:bold;height: 30px;margin: 0;margin-top: 10px;margin-left: 10px;padding: 15px 15px 15px 5px;vertical-align: top;border: 1px solid #ddd;box-sizing: border-box; 
}.contact-form-email {display: inline-block;background: #FFF;background-color: #FFF;color: #A1A1A1;font-family: Arial,sans-serif;font-size: 13px;font-weight:bold;height: 30px;margin: 0;margin-top: 20px;margin-left: 10px;padding: 15px 15px 15px 5px;vertical-align: top;border: 1px solid #ddd;box-sizing: border-box;

.contact-form-subject {display: inline-block;background: #FFF;background-color: #FFF;color: #A1A1A1;font-family: Arial,sans-serif;font-size: 13px;font-weight:bold;height: 30px;margin: 0;margin-top: 20px;margin-left: 10px;padding: 15px 15px 15px 5px;vertical-align: top;border: 1px solid #ddd;box-sizing: border-box;

.contact-form-country {display: inline-block;background: #FFF;background-color: #FFF;color: #A1A1A1;font-family: Arial,sans-serif;font-size: 13px;font-weight:bold;height: 30px;margin: 0;margin-top: 20px;margin-left: 10px;padding: 15px 15px 15px 5px;vertical-align: top;border: 1px solid #ddd;box-sizing: border-box;}
.contact-form-email:hover, .contact-form-name:hover{border: 1px solid #bebebe;box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 15px 15px 15px 5px;
 .contact-form-email-message:hover {border: 1px solid #bebebe;box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 10px;
.contact-form-email-message {background: #FFF;
background-color: #FFF;border: 1px solid #ddd;box-sizing: border-box;color: #A1A1A1;display: inline-block;font-family: arial;font-size: 12px;margin: 0;margin-top: 20px;margin-left: 10px;margin-bottom: 10px;padding: 10px;vertical-align: top;max-width: 500px!important;height: 120px;border-radius:4px;

.contact-form-button {cursor:pointer;height: 30px;line-height: 30px;font-weight:bold;border:none;

.contact-form-button {display: inline-block;zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */*display: inline;vertical-align: baseline;margin: 0 10px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(1,1,1,.3);-webkit-border-radius: .2em; -moz-border-radius: .2em;border-radius: .2em;-webkit-box-shadow: 0 1px 2px rgba(1,1,1,.3);-moz-box-shadow: 0 1px 2px rgba(1,1,1,.3);box-shadow: 0 1px 2px rgba(1,1,1,.3);
.contact-form-button:hover {text-decoration: none!important;border: none!important;
.contact-form-button:active {position: relative;top: 1px;

<div class="form"><form name="contact-form"><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' /><p></p> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/><p></p><input class='contact-form-subject' id='ContactForm1_contact-form-email' name='subject' value="Subject"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Subject&quot;;}' onfocus='if (this.value == &quot;Subject&quot;) {this.value = &quot;&quot;;}'/><p></p><input class='contact-form-country' id='ContactForm1_contact-form-email' name='Country' value="Country"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Country&quot;;}' onfocus='if (this.value == &quot;Country&quot;) {this.value = &quot;&quot;;}'/><p></p><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" value="Leave Your Message.."></textarea><p></p><input class='contact-form-button contact-form-button-submit' type='reset' value='Clear'/>  <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br /><div style="max-width: 500px; text-align: center; width: 100%;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div>
5. Now publish the page and open the page. You will see your brand new contact form.

Monday, 20 May 2013

How To Get A Blog

Blogs are very popular way to get audience from worldwide. If you have a blog, you can share your thoughts, your content with the people from worldwide. So, if you want to be connected with people from worldwide, you must create a blog and start blogging. Let's see how to create a blog:
> To create a blog, you need to sign up for an account on Blogger.
> After signing up, create a blog.
> Choose a blog title and blog address for your blog. If the address is available, then select a template and then click Create Blog.
How To Get A Blog
> You can use a custom xml template also. To upload a custom template, just go to your dashboard and then click Template option.
template customization
> Now click Choose File button and then open your template. Then click Upload button to start uploading your template.
uploading custom template
> After uploading your template, you can do some customization by editing template html code. After everything is done, open and see the preview of your blog.
> Now to publish your articles, go to your dashboard and click Create New Post.
create new post
> After typing your article, you can publish it.
Note: You can make your blog more attractive by adding CSS Codes with your posts and by adding gadgets in your template.

Friday, 17 May 2013

Blogger Launches New Contact Form Gadget

Blogger Launches New Contact Form Gadget
Blogger has recently launched a new Contact Form gadget for the blogger blogs. It was the most awaiting gadget because bloggers who don't have their own hosting space, were using contact forms from third party sites. But now it's the official gadget for blogger, so you don't need to embed any form or use any external code for your blog to add a contact form. Let's see how to add this form in your blog:
> Login to blogger account.
> Go to Layout > Add A Gadget.
> Now, from the More Gadgets section, add the Contact Form gadget and save your layout.
Blogger Launches New Contact Form Gadget
> Open your blog and see the contact form.
Blogger New Contact Form Gadget
Keep visiting for more tricks.

Friday, 22 March 2013

CSS3 Black Dropdown Menubar For Blogger

CSS3 Black Dropdown Menubar For Blogger
Hi friends, Today, I'm gonna tell you the code to add a black stylish navigation menubar in blogger blog. This menubar looks great and functions smoothly.

Follow The Steps Below:

  • Login to your blogger account.
  • Go to Template > Edit HTML > Proceed.
  • Now, find ]]></b:skin> and just above this line, paste the following code:
/* The CSS Code for the menu starts here */
.pctricksguru_menu,.pctricksguru_menu ul,.pctricksguru_menu li,.pctricksguru_menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
.pctricksguru_menu {
 height: 40px;
 width: 525px;
 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
.pctricksguru_menu li {
 position: relative;
 list-style: none;
 float: left;
 display: block;
 height: 40px;
.pctricksguru_menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;
 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;
 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;
 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;

.pctricksguru_menu li:first-child a { border-left: none; }
.pctricksguru_menu li:last-child a{ border-right: none; }

.pctricksguru_menu li:hover > a { color: #8fde62; }

.pctricksguru_menu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;

.pctricksguru_menu li:hover > ul { opacity: 1; }
.pctricksguru_menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
.pctricksguru_menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
.pctricksguru_menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
.pctricksguru_menu ul li:last-child a { border: none; }
.pctricksguru_menu a.documents { background: url( no-repeat 6px center; }
.pctricksguru_menu a.messages { background: url( no-repeat 6px center; }
.pctricksguru_menu a.signout { background: url( no-repeat 6px center; }
  • Now, save the template.
  • Go to blogger Layout > Add A Gedget > HTML/Javascript Gadget.
  • Copy and paste the following code in the content box:
<ul class="pctricksguru_menu">
 <li><a href="">Home</a></li>
 <li><a href="">Likes</a></li>
 <li><a href="">Views</a>
   <li><a href="" class="documents">Documents</a></li>
   <li><a href="" class="messages">Messages</a></li>
   <li><a href="" class="signout">Sign Out</a></li>
 <li><a href="">Uploads</a></li>
 <li><a href="">Videos</a></li>
    <li><a href="">About</a></li>
 <li><a href="">Contact us</a></li>
  • Replace # with your target link and red text with your own text and save the widget.
  • Save the layout and see your blog.

Thursday, 21 March 2013

Add Author Box Below Each Post In Blogger

Add Author Box Below Each Post In Blogger
Hi friends, you might have seen Author Box in the blogger blogs and wanted to add it in your blog also. So, I am going to tell you an easiest way to add author box below each post in blogger. The only thing you need is to read this tutorial and I have explained it in a very simple way.

Follow The Steps Below:

  • Login to your blogger account.
  • Go to Template > Edit HTML.
  • Now, copy the following code in and paste just above the </head> .
border:1px solid #ccc;
border:1px solid #ccc;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
.mdauthor_info h3{
.mdauthor_info h3:hover{
border : 1px solid #EEEEEE;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
margin:0 0 0 10px;
.mdauthor_photo img{
border:1px solid #666;
-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);
.mdauthor_photo img:hover{
border : 1px solid #EEEEEE;
-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
.mdsocial li{
background:none !important;
padding:0 !important;
margin:0 8px;
.mdsocial li a{
background:url("") no-repeat transparent;
text-indent:-99999em !important;
.mdsocial li a:hover{
padding:0 !important;
.mdsocial li.rssicon a{
background-position:0 0;
.mdsocial li.twicon a{
background-position:-50px 0;
.mdsocial li.fbicon a{
background-position:-100px 0;
.mdsocial li.gicon a{
background-position:-150px 0;
.mdsocial li.rssicon a:hover{
background-position:0 -50px;
.mdsocial li.twicon a:hover{
background-position:-50px -50px;
.mdsocial li.fbicon a:hover{
background-position:-100px -50px;
.mdsocial li.gicon a:hover{
background-position:-150px -50px;
border-top:1px solid #fefefe;
border-bottom:1px solid #CCCCCC;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
text-shadow:0 1px 0 #fff;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
margin:10px 0;
margin:0 auto;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
padding:8px !important;
.mdemailform, .mdemailinput{
width:98% !important;
  • Now, copy and paste the following code just after the <data:post.body/> (if this code appears for more than one time, then paste the code after second appearance) code and replace the colored text with your own profile links then save your template. 
<div class='mdauthor_info'><div class='mdauthor_photo'>
<img alt='author' height='150' src=" IMAGE URL HERE' width='150'/>
<h2>About The Author:</h2>
<div class='mdlinediv'>
<div class='mdemail'>
<small style='text-align:center;'>Get Free Email Updates In Your Inbox!</small>
<form action='' class='mdemailform' method='post' onsubmit=';;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='pctricksguru'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mdemailinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='mdemailbutton' title='' type='submit' value='Subscribe'/>
<ul class='mdsocial'>
<li class='rssicon'>
<a href=" FEEDBURNER URL'>Rss</a>
</li><li class='twicon'>
<a href=" TWITTER URL'>Twitter</a>
</li><li class='fbicon'>
<a href=" FACEBOOK URL'>Facebook</a>
</li><li class='gicon'>
<a href=" GOOGLE PLUS URL'>Google +</a>
    • That's it. Check your blog.

    Custom Search Box

    Offers and Deals

    Subscribe Our Newsletter