How To Add Chat Emotions In Blogger Comments

Due to increase in the use of social media platform people have a habit of using funny Smileys along with their comments. Recently, one of our user asked us that how to add chat emotions in Blogger comments ? Today in this post, i will show you how to add chat emotions in blogger comments.

Why To Add Chat Emotions In Blogger ?

Action speaks louder than words. Similarly, chat emotions are a way to show your mood. Whenever a user leaves a comment on your site, you don't have any idea about how he is feeling. However, if the same comment has a Angry, Happy, or confused emotion image then you can easily understand that mood of the commenter. This is the reason why, a lot of commenting systems are adding emotions to there platform. And the same thing can be added to Blogger custom commenting system as well.

How To Add Chat Emotions In Blogger ?

First of all, Sign in to Blogger and then select your Blog.

After that, you need to click on Template from the left side bar and click on Edit HTML

Now, Press Ctrl+F and then you'll have search bar and then search for </ body> tag using that search bar. Once you found the </body> tag, then paste the following code above it.

"<script src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/js/netoops-whatapp-smileys-blogger-posts-comments.min.js'/><script type='text/javascript'>//bloggersmileys.init();</script> "

That's it, after adding the above link emotions can be used in comments. However, if you want to display emotions short codes to help users to use them efficiently in their comments, then continue following the tutorial.

Again in the Template, search for <div class='post-footer-line post-footer-line-3'> then look for </b:includable> tag and just above it paste the following script.

"<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='noopsmile' id='noopsmile' style='background-color:#E0F7FF;background:#eee; border-radius: 7px;width:634px; padding:10px; border:1px solid #ddd'>
<img src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/imgs/comment-section1.png'/><a style='display:none;' href='www.netoopsblog.com' >bloggerwidgets</a><div align='right' id='close' style='font: bold 13px arial;margin-top: -14px; cursor: pointer;'> Close [x] </div></div><div id='open' style='background-color:#eee; border-radius: 7px; padding:10px;width: 87px;cursor: pointer;display:none;left: 582px;position: fixed;top: 1%;z-index:999;font-weight:bold;'> Open Emoticions</div>
 </b:if> "

After that, you need to add the CSS coding of Smileys in order to make them look as appealing as Whatsapp, Facebook or any other popular social platform. Search for ]]></b:skin> tag and paste the following code it.

".post-body img.noops-smly {
  padding: 0 !important;
  margin-top: -2px !important;
} "

Afterwards, simply hit the Save Template button and start using those awesome smileys on your blog.

How To Disable Text Selection In Blogger

Sometime we need to copy text content from blog sites for personal use. But not all of blog site user copy text for personal use - a lot of content thief, content scraper copy our website/blog sites content for use them on their commercial project or use somebody's text content directly on their website.

To copy text content from a website firstly we have to select text. This text selection can be turn off. As major Blogging platform known as WordPress and Blogger. WordPress far advance satisfaction by using variety of plugins. Such as Wp Content Protect plugin disable text selection from WordPress blogs and in Blogger there is also a solution available to disable text selection. Let's see how to set it up and how it works.

How To Disable Text Selection In Blogger For Preventing Copy Paste :

• First Log in to your Blogger, select your Blog.
• Go to 'Layout' tab, Click "Add a Gadget"
• From pop up menu select "Html/Javascript"
• And in content box paste following script code.

<!--start of prevent copy paste by funisonline.blogspot.com-->
<script
scr='demo-to-prevent-copy-paste-on-blogger-files/googleapis.js'>
</script><br /><script type='text/javascript'>
if(type of document.onselectstart!='undefined') { document.onselectstart=new Function ('return false' ); } else { document.onmousedown=new Function ('return false');
document.onmouseup=new Function ('return true') }
</script>
<!--end of prevent copy paste by funisonline.blogspot.com-->

After pasting the code save it.

And view your Blogger blog the text selection with mouse option is gone. This method all text element will be block out if you need some advance system where some part of blogs will be enabled for copying texts then follow the up coming tutorial.

How To Use Google Fonts In Blogger Post

Your Blogger template's default fonts are basically Ariel, Georgia, Times, Trebuchet, Helvetica. These fonts are simple and not so attractive. If your blog running with these default fonts may be you will lost some audience, those audience who care about your blog design overall too. But these default fonts can be change easily. There are lots of font providers offers web fonts what can be easily integrate to your site. Google web font is one of the best web font provider. In Google font's collection more than 650+ font with various styles you can find.

Using Google font in your post, you can customize your font style more specifically, like font thickness, slant, width, line height, font weight, font script etc. Let's add Google font in your Blogger, this process is easy and difficulty is beginner.

How To Use/Install Google Font In Blogger Post :

Step 1 :

• Go to Google web font (Click Here)
• See demo of font family by Word, Sentence, Paragraph
• Use Filter (Left Side) for find more specific font style.
• After choosing a font style click on "Quick Use"
• Then you will direct to another page where you can find that font's set up codes.

Step 2 :

• Embedding CSS import (Easier)                           Or
• Embedding Link Standard (Easy)

Embedding CSS Import :

• On your chosen font's page you will see a option named "Add this code to your website"
• Select '@import' tab, and copy the given line
• Now, Login to your Blogger and select your blog
• Go to, Template and click on Edit HTML
• Search for ]]>< into code snippet (Using Ctrl+F or Cmd+F)
• And before ]]>< paste that copied line
• Then, go back to Google font's page and copy the line (font-family) of integrate the fonts into your CSS option
• Come back to Blogger's Template > Edit HTML, Again search for .post-body into code snippet
• Into post body's brackets paste that (font-family) line
• Save Template and check out your blog for live action.

Embedding Link Standard :

• On your chosen Font's page you will see a option "Add this code to your website"
• Below a <link> code you will see, copy it
• Now log in to your Blogger account, select your blog
• Go to Template > Edit HTML
• And search for </head> into code snippet (Using Ctrl+F)
• Above </head> paste that link code
• And modify the <link> code, Just add a slash (/) in the very last side of the <link> tag
• The modified version looks like this <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='Stylesheet' type='text/css'/>
• Then, go back to Google font's page and copy the line (font-family) of integrate the fonts into your CSS option.
• Come back to Blogger's Template>Edit HTML , Again search for .post-body into code snippet
• Into post body's bracket paste that (font-family) line 
• Save Template and check out your blog for live action

Additionally :
If you think font line height is not quite right than you expected. In that case add this code into .post-body bracket (line-height:1.5;)

And if you feel the font size is not suiting your site. So change font size with adding this code into .post-body bracket. change 16px to any px you want (font-size:16px;)

Then Save Template, you are done !

How To Make Your Blogger Blog Private

How To Make Your Blogger Blog Private ?

Today i will tell you that how can we private our blog and make it secret from public. Blogs created on blogger are by default for all readers so that they can read any blog according to their choice. But sometimes we need to make our blog private so that nobody can access our blog without our permission like in case of private blog where we share out family photos for family members only or a blog for friends so that only they can access that blog.

The reason can be different for different blogs to make their blog private. Blogger provide a weird tool by which we can easily convert our blog to the private from public. Only blog admins and authors can access the blog if they are log in their Google Account and they have access to view the blog.

Let's start the tutorial ...

Here is a simple step you must follow to enable the private blog.

• Login in to Blogger and go to Settings > Basic > Blog Readers.

Under the blog readers section click on edit link where you will find below three options.

• Anybody : This option is selected by default, means your blog is open for public readers. Anyone can access your blog without any restriction.


• Only Blog Authors : If you choose this option then your blog will only be accessible to those users who are invited by you to edit or access your blog. They called admins, you can select their options for admins or moderator.


• Only These Readers : This is the last option which provides the facility to open your blog for particular readers. You can enter the list of their email id's so that they can receive an invitation to become your blog reader.

Now save the settings to make the changes. Have fun !