Home » All posts

Highlight Author Comments in Blogger websites with CSS

Posted by Umar Khaleeq Tuesday, April 15, 2014 14 comments

Hi friends, you surely have seen on many blogs and websites whenever an Admin of the blog or website make a reply to your comments, its comment's color and style is changed from other comments. These admin styled Comments are the best way to make good relationship with blog visitors or Followers.
So do you have a blog and your blog is getting good traffic then your blog will also be getting many comments, that may be positive or negative related to your blog website content.

If you want to highlight your comments in your blog website, then here is the trick to do that and make your comments stylish,colorful and recognizable to others.Here I am going to share the trick to highlight Author Comments in Threaded comments and this trick also work in basic commenting system. This is coded using simple CSS and Jquery.

How To change Author Comments style In Blogger

Learn how to change blogger admin comments style and color in blogger template using CSS and Jquery for better interaction with your blog's users in easy steps.

Step 1. Login to Blogger >> Go to Dashboard >> Template >> Edit Html

Step 2. Find </body> and copy the following code above it [Tip: Ctrl+F]

<script type="text/javascript">
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWqY359PMJSTrFZrCT9wuW0fLJA_MQ-ghyphenhyphenYt19TrvBqExN0lde3-KC3_JOZjsVNXSNaWE9D2PGb1KSlEoXtkeFT7A0BfHMQwefg0F7AMtTNCz_8pA97UoTVnxUD9qm9_zJ4zIWv0A1Xk/s1600/admin_comment1.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});</script><a style="display:none" href="http://www.blogtipsuk.com" >Blogger seo tips</a>

Step 3. Change red color bolded text according to your choice for border of the author comment.

Step 4. Now save your template and you are done.

Congratulations you are done. If you enjoyed this article please like and share.

Install Scrolling "Back To Top" Button for Blogger/Blogspot

Posted by Umar Khaleeq Monday, April 14, 2014 0 comments

You surely have seen on many blogs and websites a "Back To Top" Button in the sidebar at the bottom of the page that shows an image when clicked, it takes the user to top of your blog website. Animated back to top button in blogger website is one of the best Jquery style animated widget that looks good and also visitors enjoy easy site navigation scroll to top.

The best thing about this button is that it appears only when the user scrolls down the page and disappears as he scrolls up, and also one more feature of this script you can add your own image that you like as the back to top button.

Exactly same type of Back to Top Button in being used in our site. Probably one of the best Back to Top Button.

You would also like to use: Sharing Buttons for websites in Blogger.

Add Smooth Scrolling "Back To Top" Button Widget to Blogger Jquery

Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript.

Step 3. Select & Copy the code below and paste it into the new HTML/JavaScript:

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>
<script type="text/javascript">
var scrolltotop={
//Modified by www.blogtipsuk.com more JQuery Scroll to Top Design
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="IMAGE LINK" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Step 4. Replace IMAGE LINK with the image link of your back to top button.We have collected some back to top buttons for your ease. If you want to add image link then right click any button below and select "Copy image URL" and add this link:

Collection of Back to Top buttons

Step 5. Save the Widget and drag it near the footer or any bottom position.
Step 6. View your blogger website to see Smooth Scrolling "Back To Top" Button.

Related Posts reduces bounce rate

Want some other widgets for blog designs or need any help regarding this post, then you can comment below. I will try to answer as soon as possible. Enjoy your day!

Add Floating Sliding Facebook LikeBox Widget in Blogger

Posted by Umar Khaleeq Thursday, April 3, 2014 6 comments

Blogging has become a trend now a days online. Every blogger want there blog attractive and stylish so they always add new and more beautiful widgets in there blogs.Today I am going to share a very easy and simple way to put a sliding Facebook like box which is called Sliding Facebook Like Box or Floating Facebook Like Box.The widget works as a fb image remains in a fixed position on the right hand side of your site. When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.
Simple when you take your mouse on facebook image , like box will then appear.

Add Facebook Floating Like Box Widget in your blogger websites

The process of adding this widget to your blog is simplest. You need just to follow below steps:

1. Open Blogger

2. Go to Layout

3. Add a Gadget

4. Add HTML/JavaScript

5. Copy the below code and Save

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".blogtipsuk").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .blogtipsuk{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV_GLSCvB6szsxNBkYOIJ4msDilf6gDZ85-GhxyqvUOG7X9uvItmqerQBZnCWLmj1CIZh5WRIphC2ETs0md3spmPNL6OYndTziRDXC0_w0W7m2Zg7cduFKS-Va_61iT-z1moU51GMHmGaq/") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .blogtipsuk div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .blogtipsuk span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .blogtipsuk span a{color: gray;text-decoration:none;} .blogtipsuk span a:hover{text-decoration:underline;} } </style><div class="blogtipsuk" style="">
<div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=Write URL of Facebook Page&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><b:if cond='data:blog.url == data:blog.homepageUrl'><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://www.blogtipsuk.com">New Blogger Tips</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://bloggerseotipstraining.blogspot.com/2014/04/add-stylish-facebook-floating-like-box-widget-to-blogger.html">Floating Facebook LikeBox in website</a></center></b:if>
</span></div>
</div>

6. Save Arrangement

Customization

1. The floating is set to right side of your blog, if you want set it for left side of your blog then simply change the bolded float:right property to float:left
2. Change Write URL of Facebook Page with your own facebook page URL.

Note:

If the floating facebook like box widget is not working properly after step 1, then you need to add jquery to your site.

Follow the instructions below.

1. Go to Design>Edit HTML

2. Search for <head> and just below it paste the following JQuery code.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Add Facebook Comment Box to Blogger/Blogspot

Posted by Umar Khaleeq Wednesday, March 26, 2014 57 comments

Facebook comment for your blog can serve as a good way to make your site more engaging and encourage readers to drop comments if they're already logged in to Facebook. It also serves as a source of traffic since using Facebook comment shares the comment and post page on the visitor’s viewer's Facebook wall. One thing should be noted though: Facebook comment has no SEO value since it’s being displayed in an iframe which Google won't index. Comments made with the regular comment box on your site has more advantages especially if you get loads of comment, more keywords you didn't actually mention in the post content but appearing in comments do bring more search engine traffic. This is something Facebook comment lacks, except the extra traffic you get from Facebook.

I just thought you should know that before you implement it on your blog. As you can see, I do use it too. I wrote a post on this particular topic earlier but Facebook has changed since, lots of things on the post may not look exactly as explained. Also, this one has a feature the previous one didn't have – getting notified of every comment made on your blog.

Also Read: Add social media FB buttons in Blogger

How to add Facebook comment box to Blogger Blogspot Blogs

There are about five steps to get this done. Just follow the steps and you'll have a nice Facebook comment box installed on your blog in no time.

1. Creating a Facebook Application:

i. Head on to facebook developer page, you should create a new app by clicking the button at the top right.

ii. Enter your application name and namespace,input the captcha code and proceed.

iii. On the next page, enter your custom domain name (if you’re using a custom domain) or just blogspot.com (if you’re using blogspot sub domain) in the space provided for App domain.

For App website, enter your blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:

iv. Scroll down a bit and hit the Save Changes button. Now you're done with creating your facebook application but there's one more thing to do. On that same page, you should see your application ID. Copy it and save somewhere, you're gonna be needing it.

Now let's head to your blog and add following html codes to add facebook comment box.

2. Add html codes to your template for Facebook Comment Box

Add these four sets of codes into your template to make this comment box work in your blog site.

Step 1. Log in to your blogger account and click on Template > Edit HTML

i. Press Ctrl + F and search for this code

<html

This should be found on the second or third line of your template.

Right in front of this, add the following code:

xmlns:fb='http://www.facebook.com/2008/fbml'

>>Be sure to have a space before and after this code. Take a look at the example below:

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >

ii. Press CTRL + F on your keyboard and search for this:

<body>

If you can't find this, search for something similar. You should search for this instead:

<body expr:class='"loading" + data:blog.mobileClass'>

Get Facebook LikeBox Widget

In the next line, paste this code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Be sure to replace YOUR APPLICATION ID HERE with the application ID I asked you to copy earlier, remember?
iii. Now, let’s add the open graph meta tag. Search for this code in your template:

</head>

In the line above it, paste this piece of code:

<meta property="fb:app_id" content="YOUR_APP_ID" />

Replace YOUR_APP_ID with that same application ID you previously copied.

iv. Now here’s the last part of tweaking your template your template to make it display Facebook comment box. The last thing is the iframe to display the comment box where you want. Search for this in your template:

<data:post.body/>

If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:

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

In the line just below it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<style>
.blogtipsuk-fb-comments
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='blogtipsuk-fb-comments' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div><div align='right'>[
<a href='http://bloggerseotipstraining.blogspot.com/' target='_blank'><small>Blogger Widgets</small></a> | <a href='http://bloggerseotipstraining.blogspot.com/2014/03/add-facebook-comment-box-to-blogger-websites.html' target='_blank'><small>Facebook Comments in Blogger</small></a>]</div></div></p></b:if>

Save your template, the Facebook comment form should now appear. If it looks rather small, replace width=’450′ with width=’600′. This increases the width from 450px to 600px.

Get Free SEO for Blogger

If this works for you, you can say thank you by sharing on Facebook, hitting the Google +1 button or simply using the comment box. Also, it would be nice of you not to remove the credit link to allow others find this useful widget. If you're having problems implementing this as well, don’t hesitate to let me know maybe I can be of help.

How to Earn Money from new Blogger blogs or Blogging

Posted by Umar Khaleeq Thursday, March 13, 2014 7 comments

Today I’ll teach you some easy ways to earn online money from writing free blogs. This post contains all the ways for online earning with blogs and will help you to know all the basic aspects of blogging. People think internet is a place to become rich in days without much effort but in my opinion 1st simple rule of success is hardworking with some knowledge.

Following this rule Blogging is not a process to become rich in days but it is a long term process with hard word and passion. According to a survey only 9% bloggers are able to make more than 100$ a month. There are many bloggers who cannot even go to 100$ in their entire blogging career. But let me tell you It is possible to make money blogging, but it takes time and a lot of hard work.

Before working blogging online following points must be kept in mind.

You must know:

Basic computer skills.
Basic internet surfing knowledge.
You must understand and write English.

Starting a Blog at Blogger.com for Online Earning

First step is starting a free blog online. There are many online websites which offers free online blogging space. But my recommendation is at blogger.com. Due to wide range of easy and salient features of blogger.com blogs is the best free blogging platform online. How to start a free blog

Following points should be kept in mind before making a blog online:

Think of a topic to write about, something you like most or have prior knowledge about.
Make title of your blog and write posts about that topic (of your choice).
Blog style matters, make your blog look beautiful by applying blogger templates of your choice.
Choose attractive blogger templates at Btemplates , Deluxe Templates

Get more Traffic to your Blog by SEO

Now that you have started writing blog of your choice. But think yourself who is visiting your blog, I mean what number of people are actually reading your blog. So it is time to get some traffic to your blog. By traffic I mean a lot of people (like in thousands). This will lead you to a successful blogger. To get so much heavy traffic to your blog, firstly you have to do SEO of your blog, on-page SEO and off-page SEO both are very necessary to bring organic traffic to your blog. It tells search engines what your site really is about, according to which your blog will be showed to the required traffic who actually wants to read it.

Also make your blog a place worth visiting. I mean blog design should be simple but look attractive. And content on your blog should also be informative and constructive. Read these basic Tips to increase blog traffic

If you do not know anything about SEO, then do not worry. You can ask me for Blogger SEO Services at very low cost.

Put Ads on your blog to earn money online

After doing SEO and writing good content on your blog. You will need some advertising sites to put ads on your blog to earn online income. These sites give you codes for their ads to put on your site and give you commision when somebody click on these ads. Following are some of the best ads publishing sites from which you can earn money by displaying their ads on your newly started low traffic blog. See a list of Best Earning Sites for Blogger.

My Recommendations:

When you start a blog, try to write at least 3-4 articles(posts).
Then do the SEO of your blog. (or hire me for blogger SEO )
Now its time to test your writing skills. Try to write as many articles as you can (at the most 20-40).
After 2 months, you will be getting around 1000+ visitors per day.
Its time now to put ads on your blog.
See a list of Best Earning Sites for Blogger.

Blogger Tips and Tricks