Blogger Sliding Widget

Blogging becomes interesting when people share your content on different
social media sites and other websites with friends. In order to share
your content on social media sites by visitors; you need to add some
beautiful and smashing social sharing widgets. If your widget is looking
attractive and catches people's attention then your content might get
shared by visitors. For this purpose, there has been a huge number of
Blogger widgets and plugins by
different designers. Today, I would like to share a floating social
sharing widget with you which scrolls down automatically when visitors
scroll down the page. You can see this widget on my blog. The same widget I'm sharing with you.

The Benefits of This Widget:

There are many advantages you can get by using this widget on your blog.
The first benefit is that you can have all social sharing buttons in a
single widget and also one can send your content to someone via email by
using this widget. The second benefit is that this widget don't have
loadable JavaScript or jQuery codes so it can easily be loaded by
browser and also it scrolls down automatically and user can observe
sharing your content somewhere, while visiting your blog.

How to Add Social Media Floating Widget to Blogger?

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

<div
<!–sidebar floating share buttons code start–>

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left;
border: 1px solid black;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0
0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px
!important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="Apply this Widget on your website or Blog">

<div class='sbutton' id='gb'><script
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like
layout="box_count" show_faces="false"
font=""></fb:like></div>

<div class='sbutton' id='rt'><a href="http://twitter.com/share"
class="twitter-share-button" data-count="vertical"
data-via="UmarKhaleeq">Tweet</a><script
src='http://platform.twitter.com/widgets.js'
type="text/javascript"></script></div>

<div class='sbutton' id='gplusone'><script type="text/javascript"

src="https://apis.google.com/js/plusone.js"></script><g:plusone
size="tall"></g:plusone></div>

<div class='sbutton' id='su'><script
src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' id='digg'
style='margin-left:3px;width:48px'><script
src='http://widgets.digg.com/buttons.js'
type='text/javascript'></script><a class="DiggThisButton
DiggMedium"></a></div>

<br/><div style="clear:
both;font-size: 9px;text-align:center;"><a
href="http://bloggerseotipstraining.blogspot.com/2013/03/vertical-social-media-sharing-buttons-blogger.html">[Get
This Widget]</a><font></font></div></div>

<!–sidebar floating share buttons code end–></!–sidebar></!–sidebar>

6. Save Arrangement


Customization


The floating is set to left side of your blog, if you want set it for right side of your blog then simply change the bolded  float:left property to float:right.

SEO Meta Tags For Blogger

SEO Meta Tags:

Meta tags is a important things for SEO (Search Engine Optimization). The <meta> tag provides metadata about the HTML document.
Meta tags will not be displayed on the page, but will be machine
parsable. Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other metadata. The
metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. Google bots read meta tags of a site or blog and give these tags (title,keywords and description) information to google search engine, according to these tags your blog is showed in google search engine results pages (SERP's).





Meta Tags are most important and most useful for our blog's SEO.

Put SEO Meta Tags in Blogger Template

Learn how to put Meta Tags in blogger template for better ranking in search engine results with easy steps.



Step 1.

Login to Blogger >> Go to Dashboard >> Template >> Edit Html



Step 2.

Find the following code [Tip: Ctrl+F]

<head>

This will be mostly on the main page of the template coding.



Also Read: How to write Title Tags for better SEO Results?



Step 3.

After/under this line paste the following code.

           <!-- Meta Tags ~  bloggerseotipstraining.blogspot.com  -->

 <meta content='Your Blog Description' name='description'/>

 <meta content='Keyword1,Keyword2,Keyword3' name='keywords'/>

 <meta content='Author Name' name='Author'/>

 <meta content='Author Email Address' name='Email'/>

 <meta content='all' name='robots'/>

 <meta content='index, follow' name='robots'/>

 <meta content='Language Name' name='language'/>

 <meta content='Country Name' name='country'/>

 <meta content='blogger' name='generator'/>

               <!-- /Meta Tags ~   bloggerseotipstraining.blogspot.com  -->

Step 4.

Change red color bolded text according to your choice.



Note:  write keywords in separate commas  i.e., write comma after every word.



Step 5.

Now save your template and you are done, your blog is optimized for SEO and Google will show your site/blog in search results

SEO Meta Tags in Google Search Engine Results Pages

Your Blog's Title and Description Tag will look like this in Google Search.

Install JQuery In Blogger

JQuery is the library which is used to support the certain plugins and scripts. It’s the most commonly used library now a days which is used by the web developers. Web developers used this library in order to enhance the design and interactivity of the website or blog. The main advantage of using this library in your blog/site is that you will get rid of uploading the extra files and complicated stuff. You might have observed different animations and effects in several professional blogs and websites, it’s all because of JQuery. Once you installed JQuery, you will able to easily enrich the appearance of your blog or website. Let’s see how you can install JQuery library in your Blogger Blog. Follow the simple steps below:

1. Go to Google Developers.

2. From the list of Google Hosted Libraries, Select JQUERY.

(Note:- Don’t Mistake With JQueryUI)

3. A Google Hosted Libraries with detail description window will open. Under each library you will see the 4 description categories i.e. SNIPPET, SITE, VERSIONS & NOTE.

4. Go to JQUERY and from SNIPPET category, copy the link.

The link will look similar to the below link: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

5. Save the link in Notepad File for later use.

How To Install JQUERY In Blogger?

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

 4. Inside the “HTML EDITOR”, Press CTRL+F and search for </head> tag.

5. Now copy & paste the JQUERY Code (SAVED IN NOTEPAD FILE), just above the </head> tag.

6. Click “SAVE TEMPLATE”.

You are all done. Now you can easily enhance your website using JQUERY plugins and scripts.

That’s All.

Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

ADMIN Ribbon Or Icon With Comments In Blogger

Blogger commenting system has always been flexible and provides the facility to their users to customize it their own way. There are number of features which can be easily customizable in blogger commenting system which gives a new and bright look to the entire conversation. Readers also enjoy the conversation if the commenting system is more advanced and highly modified. Today one of our readers asked that how can I add ADMIN Ribbon Or Icon With The Admin Comments in Blogger. So today this is special requested tutorial that we are going to share to show how easily you can implement this feature in Blogger Commenting System.

DEMO

Must Read This:

• Enable Threaded Comments In Blogger
• Enable Auto Numbering With The Threaded Comments In Blogger

How To Add ADMIN Ribbon Or Icon With Comments In Blogger?

So let’s start with the tutorial:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag. Click ► to expand the code.

5. Then search for “COMMENTS” styles between </b:skin> and ]]></b:skin> tags.

6. You will find the code similar to this:

#comments .comment-author{
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child{
padding-top: 0;
border-top: none;
}
.comments .comment-content{ padding:5px 0;
}
.avatar-image-container{
margin: .2em 0 0;
}
#comments .avatar-image-container img{
border: 1px solid $(image.border.color);
}
.comment-actions a
{
font-size:11px; color:#777 !important
}
.comments .comments-content .user
{
font-size:16px; color:#000;
}
.comments .comments-content .datetime
{
font-size:11px; color:#777 !important
}
.comments .comments-content .datetime a
{
color:#777;
}
.comments .comments-content .comment-thread ol a
{
color:#000;}
.comments .comments-content .loadmore a{
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-block
{
border: 1px solid #ddd;
padding: 7px;
}
.comments .comment-thread.inline-thread{
background-color: $(post.footer.background.color);
}
.comments .continue a
{
background:#f9f9f9;width:130px;border:1px solid #ddd;border-radius:9px;
padding: 10px;color:#000;
}
.comments .continue{
border-top: 2px solid $(widget.alternate.text.color);
}
.comments h4{
font: $(post.title.font);
margin: .75em 0 0;
padding: 10px;
border: 1px solid #ddd;
width: 100px;
}
.comment-form
{
width:90%;
max-width:90%
}

7. Now copy & paste the following code, just below the Yellow Highlighted Code above.

.comments .comments-content .icon.blog-author
{
background-repeat: no-repeat;
background-image: url (Your Ribbon Or Icon Image Link Goes Here);
height:38px;
width:38px;margin:0;
position:absolute;
right:0px;
top:-0px;
}

8. Click “SAVE TEMPLATE”.

You are all done. Refresh your blog to see the ADMIN RIBBON OR ICON with the comments.

Customization:

1. Replace “Your Ribbon Or Icon Image Link Goes Here” with your own Ribbon Or ICON image URL which you have hosted at blogger or other hosting services.

• Read This: Hosting Images At Blogger

2. Adjust the width, height according to your own choice. 

That’s All.

Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Styling Your Blog Posts With Borders In Blogger

Day by day as the blog business is growing, you might have seen something new and unique in different blogs. The unique blog is the dream of every blogger. Every blogger wants to look his/her blog different. To do so, many bloggers try different styles in order to make their blog look exceptional like styling their blog posts, headers, footers etc. So we are here with the tutorial to show you how you can change the look of your blog posts by applying different Borders styles. Borders make the look of blog posts very nice and also the posts written within borders look attractive too. This simple CSS styles borders are easy to implement in Blogger Blog Posts, so let’s get to work:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag.

5. Copy & paste the following code just above </b:skin> tag.

/*----- Post Styling Starts -----*/
.post
{
margin: 0 7px 20px 0;
padding: 10px 20px 10px 5px;
box-shadow: 1px 2px 2px 1px #C1C1C1;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
font-size: 13px;
text-align:justify;
}
/*----- Post Styling Ends -----*/

6. Click “Save Template”.

You are all done, refresh your blog to see the BORDERS AROUND THE BLOG POSTS.

Customization:

1. To adjust the margins according to your blog, set the values in margin styles i.e. margin: 0 7px 20px 0;

2. To adjust the positions according to your blog, set the values in padding styles i.e. padding: 10px 20px 10px 5px;

3. To adjust the box around blog posts according to your blog, set the values in box-shadow i.e. box-shadow: 1px 2px 2px 1px; 

4. To change the box/border color around blog posts, change #C1C1C1; to your own color.

5. To change the corners around the blog posts, set the values in border-radius. i.e. change 15px; to your own value.

6. To change the font size of the blog posts, set the value in font-size. i.e. change 13px; to your own value.

That’s All.

Happy Blogging.

Need Help?

Hope you have learnt how to Style Your Blog Posts With Borders In Blogger. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Setting Up Custom Domain On Blogger With GoDaddy

A custom domain (your own domain) is one of the most important pillars in your online business. Your own or custom domain shows that you are making some serious efforts in running your online business. Custom domain also leaves a great impact on the visitors and search engine also loves the blog or sites with the custom domains which helps you in long run of your blog success. Some people feel hesitation while setting-up their own custom domain and they also get confused that from where to buy the custom domain. To avoid the hesitation and confusion we would strongly recommend buying a domain from GoDaddy, the world’s largest domain registrar. They offer some exciting features with great flexibility and reliability. After you have purchased a domain from the domain registrar you need to make some DNS (DOMAIN NAME SYSTEM) settings in order to link your Blogger blog with your new custom domain. Since Blogger provides the option from its dashboard to setup your custom domain but if you have purchased the domain externally from domain or hosting service like GoDaddy then this post might help you in setting up your own custom domain on Blogger blog. You might have read several posts on Setting Up Custom Domain On Blogger With GoDaddy, and all are very properly instructed and we respect that but all those posts are according to the old settings of GoDaddy and Blogger. Since GoDaddy and Blogger have updated some settings and the people like us who are purchasing domain from GoDaddy in 2013 and setting up in Blogger might having some issues. That’s the reason we are posting this article which is according to the latest Settings of Blogger and GoDaddy (2013). To Setup Custom Domain on Blogger with GoDaddy, you first have to setup things at Blogger and then setup records at GoDaddy. 

Setting Up Custom Domain At Blogger:

1. Log-in to your Blogger Dashboard.

2. Go to Settings > Basic.

3. In Publishing section click ADD A CUSTOM DOMAIN.

4. Enter your custom domain which you have purchased from GoDaddy and click “Save”.

5. A dialog box will appear with the message “We have not been able to verify your authority to this domain. Error 12.”, leave it as it. Under the message you will find two records such as:

(a) www ghs.google.com
(b) xyz.dv.googlehosted.com (where xyz Is The Record Copied From Blogger DASHBOARD)

Copy and save the records in Notepad file for later use.

Setting Up Records At GoDaddy:

DNS (DOMAIN NAME SYSTEM) contains the two records named as: 

• A-RECORDS
• CNAME RECORDS 

You have to update the both records in your GoDaddy Control Panel, so let’s see how you can update the records.

1. Log in to your GoDaddy Account.

2. In Domain section click Launch button.

3. A Control Panel window will open. Click DNS Manager from DNS drop-down menu at the top.

4. A DNS Manager window will open. Click EDIT ZONE under your domain address in the list.

5. A “ZONE FILE EDITOR” will open. Here you have to update the A-RECORDS and CNMAE RECORDS.

(A) Creating A-Records:

In A-Records section, you have to create a record for each of the following IP addresses .i.e. creating 4 records. 

(i) Go to A(HOST) section > Click Quick ADD. 

(ii) In HOST sub-section put @.

(iii) In Points-To sub-section enter the following IP addresses.

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

(iv) In TTL section select default setting of 1 Hour.

If you have any confusion check the screenshot below:

(B) Creating CNAME-Records:

Here you have to update the 2 addresses:

(i) Go to CNAME-ALIAS section > Click Quick ADD. 

(a) First you have to add the following record:

• In HOST sub-section put www. 
• In Points-To sub-section enter ghs.google.com

(b) Second you have to add the following record:

• In HOST sub-section put xyz (where xyz Is The Record Copied From Blogger DASHBOARD)
• In Points-To sub-section enter xyz.dv.googlehosted.com record.

If you have any confusion check the screenshot below:

6. Click "SAVE ZONE FILE".

Note:- Wait for at least 1 hour till your DNS settings are activated, then move on with the tutorial.

Setting Up Custom Domain At Blogger:

1. Come back to the Blogger Dashboard, where you have entered the CUSTOM DOMAIN (See the steps above).

2. Now click "SAVE".

You are all done. Now your sub-domain (i.e. www.blogspot.com) is redirected to your new Custom Domain. 

That’s All.

Happy Blogging.

Need Help?

Hope this step by step tutorial helps you in Setting Up Custom Domain On Blogger With GoDaddy. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Enable Auto Numbering For Threaded Comments In Blogger

Threaded comments in Blogger blog is a great approach to interact with your readers and subscribers. It allows replying individually to the certain reader with many other awesome features. You might have noticed that in different professional blogs that many bloggers have customized the layout of their commenting system by adding some nice-looking options like changing the avatars, ribbons and auto numbering etc. Today in this tutorial we are going to share with you that how you can add the Auto Numbers and see the Comment Counts beside each comment in your blogger blog. It gives a very professional look to your blog commenting system and let the visitors know that how much you are eager to apply different styles to your blog and make it look exceptional. By following the tutorial below you can apply this approach very easily and perfectly.

How It Works?

Blogger blogs uses threaded commenting system which hold the <li> tag and the <ol> tag for displaying comments in well-ordered manner. In the blogger threaded commenting system the COUNTER-RESET property sets the value to zero and COUNTER-INCREMENT property increases the value by one. You can see the live demo by clicking the button below:

DEMO

Enable Auto Numbering For Threaded Comments In Blogger:

To enable the Auto Numbering for Threaded Comments in Blogger you must have first enable the Threaded Comments In Your Blogger Blog.

• Check Out Here: How To Enable Threaded Comments In Blogger

Now Lets Start Counting Comments:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag.

5. Copy & paste the following code just above </b:skin> tag.

/*----- Comment Counter Starts -----*/
.comment-thread ol {
counter-reset: mbt-comments;
}
.comment-thread li:before {
content:counter(mbt-comments);
counter-increment: mbt-comments;
font-size: 30px;
float:left;
position:relative;
top:0px;
left:-10px;
margin-right:0px;
height:100px;
margin-right:0px;
font-weight:bold;
font-family:arial, georgia;
color: #666;
}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
}
.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub,lower-latin);
counter-increment:mbt-comments-sub;
font-size: 12px;
color: #666;
position:relative;
top:10px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content
{
margin:0px 0px 8px 28px!important;
}
/*----- Comment Counter Ends -----*/

8. Click “Save Template”.

You are all done, refresh your blog to see the Auto Numbering With Threaded Comments In Blogger.

Note:- 

1. To change the SIZE and COLOR of comments count in main section, edit font-size: 30px; color: #666; highlighted in Yellow color.

2. To change the SIZE and COLOR of comments count in main section, edit font-size: 12px; color: #666; highlighted in Orange color.

3. Nested replies are counted in the order 1.a, 1.b, 1.c which is the lower-latin format. You can change this format to different styles which are as follows: 

• lower-greek, 
• circle, 
• square, 
• disc, 
• lower-roman,
• upper-roman etc.

That’s All.

Happy Blogging.

Need Help?

Hope this new approach to blogger threaded commenting system may occur in a positive change for your blog. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)