Make a Blog for Earning Money Online

Tutorial # 40 - How to Change Default Anonymous Avatar in Blogger Comments

0 comments

In the previous tutorial (Tutorial # 39), we have learnt how to amend the size of the avatars in the blogger comments. Now we are going to learn how to change or customize the default avatar of anonymous commenters or Blogger users with no picture on their profiles.

Step 1: Go to Dashboard > Template, Click on "Edit HTML"

Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2: Type or paste </body> inside the search box and hit Enter to find it

Step 3. Just above the </body> tag, add the following code:

For Anonymous users: Replace the URL in line # 4 with your image address

For Blogger users: Replace the URL in line # 10 with your own.

Step 4. Save the changes by clicking on the Save Template button

You can choose an avatar from here and then copy the URL of it:

1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNFYSoDBwGVdFIh3QosrKarL0XeCaccoTKcVV8G4883jZEUuOG6Qh6XLsgkBOskffBQAZ-vNxlqSw64t5fNtXLzqwJXNDFohm9BX7fSBsIq5VZN-nlzLQzbQNKBt9i_kbf6TWmVdgAms/s200/default_avatar.gif

2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJsiGFDxYMLGKKmGkIpoNjd4RhkXlflmJ1cmPEefeNvTq-NNjWcBDbiJ6OBQAi-n3qipvgLI98F6BC87635Suc1UFX2fBeSRYpjasHb_HDUwi-hJRcFPRkDl5jCvJhWVqZnyEFpDyh2qQ/s1600/facebook.gif

3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXVDcE7dx-fDQf_C6Z10KoZ37dCnveTORNhJ5BPR60EvM3YoJQc3m2J2nEZJ7TeJ6gAzyLQreK4T597DYwXAPNl54Qp1V9k5O0NYZ3qYCYLzCwwsbpWNEsB5Q11YFI1fw8ii2OS88bd3U/s1600/anonymous3.png

4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRtV51MSnXTt7uuNYRxIKdDtl8Yp1T6dbkyToxbDV703Q8mRNJ1yN00v9G7v1lFTyeOUEaA3ifjUQcvCVg3H3llJ-9c05uQIbehq-I-doF7rVNV_XzrXR6lgGFv_i7dpDeqpjhmgWKesOV/s1600/blogger-user.png

Tutorial # 39 - How To Change Avatar Size In Blogger Comments

2 comments

This tutorial will help you modify the avatars size in Blogger comments whose default size is of 36px. To do so, you just need to add the CSS code in your Blogger template that will make size of avatars to have width and height of 64px.

Step 1: Go to Dashboard > Template, Click on "Edit HTML"

Click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2: Type or paste this tag inside the search box and hit Enter to find ]]></b:skin>
Note: you may need to click on the arrow next to it and then search this tag again.

Step 3. Depending on which comment system you use (with reply/no reply OR threaded/non-threaded), copy and paste one of the following codes just above the code ]]></b:skin>:

[Works in Blogger threaded comment system]
.comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}

[for old blogger commenting system]
.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:70px;
min-height: 70px;
width:70px;
min-width:70px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSw9NmYTpHGetAlQe-WsYsOpjMk1mX74ZvHWMx0q18ORAabnxOQwkiujCnmDZlbTDzFHClDvOscwnLmsbvNxECVI6ODGDqHNM6o1yPM-wnXFqCee4agtWggjPFa0TMLXVJFbw1c8jXREM/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}

Note: For bigger/smaller avatars, change the values in width, max-height, max-width, height; and height, min-height, width, min-width, width, min-width, height, min-height.
To change the anonymous avatar, replace the URL with your own. (works only for the old commenting system i.e. that has no reply option)

Step 4: Click on the Save template button, and you're done. Now the avatars should look bigger.

Tutorial # 38 - Add Facemoods Emoticons To Your Blogger Comments

0 comments

An emoticon is a metacommunicative pictorial representation of a facial expression that, in the absence of body language and prosody, serves to draw a receiver's attention to the tenor or temper of a sender's nominal non-verbal communication, changing and improving its interpretation. It expresses — usually by means of punctuation marks (though it can include numbers and letters) — a person's feelings or mood, though as emoticons have become more popular, some devices have provided stylized pictures that do not use punctuation.

Crazy!

As social media has become widespread, emoticons have played a significant role in communication through technology. They offer another range of "tone" and feeling through texting that portrays specific emotions through facial gestures while in the midst of text-based cyber communication.

Here are some amazing emoticons compatible with your Blogger comments - also with threaded commenting system (See Tutorial # 35)! If you want to know how to add them, just follow the steps given below.

Step 1: Blogger Dashboard > Template and click on "Edit HTML" button

Step 2: Click anywhere inside the code area and press CTRL + F to open the search box:

Step 3: Type or paste the below line inside the search box, then hit Enter in order to find it:

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

And add the below code just after it:
<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LCTw6jNkdfVOMh41M-5_B4LuFrU8W4XOMCjTH21oFjlSQLqDofAIZdioE34t-b7jyd_lDNmwxeFUS0eWCS4lf47NE0aS8O2OU9pmST9ltBaafXZvj70bjAs707u5KTQ-ddeG3cmUTzw/s1600/earningviablog.blogspot.com+%25281%2529.gif'/> :a
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1DcybTNS50zTBDaeoDXmxdI9FuoKSVDFKiB0NvOiUMz8TwE9BZvcThFHhxjmvz_gQzJk5UsjA7QAN37YuPsop0ShTXxhCVg5TL25rH41CwpXAaXhWplUftwUeG8QhmXTxcetY0_dwtY/s1600/earningviablog.blogspot.com+%25282%2529.gif'/> :b
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwc8hIaWiA9kwhzW2vmTQ6ng7bC10vHaO7tQw6WaqmP3z2kUPagB_hYVc7jDK2UfDTke0M9zWIad6kNXXXrCgHYSHHLOaCvu6VuCGkl4z4C8piG-Yxh6C1a0uiViwP6Z0aMsvJsuwbmU/s1600/earningviablog.blogspot.com%25283%2529.gif'/> :c
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_s1XMhEUACIHMtEHJ1nxCywUSV6zZ0Waqdicb9wYZqeBCCk3rDpfZSeV0dH4_d_j5AGlqh1cwBIRklGwbSSoP9aW7fxZANwK1zNoeH1cs-RMDsXGjIC0oIDj62UAxmx9T13k7hfjvh14/s1600/earningviablog.blogspot.com%25284%2529.gif'/> :d
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh37eL6uJPrEASpeH4i1x88hnUOmZkm3D-uB30xwWdg_TvK7MM-NKUdxbydaJh9Mjb3TswOi7NU1ISmlBY1H2_o0CjRGYQxaJVzo__8cq3E-HdnVHVbzHLiYVEJHSoMt-jpbmcupp0OjgI/s1600/earningviablog.blogspot.com%25285%2529.gif'/> :e
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjHT2M7SkUsDPVKYD2-4ot1FX4-6l6E5HuUIXIiKhg4nfI9RwUtKXdLZBj3gh7gcZh5d0nKzf6znNudSSfxJFtdXNWILJk3AnwZ_2ZOsFBfKXjALQV_EnmqQadcEkB0GQQBtzBOzIvSg/s1600/earningviablog.blogspot.com%25286%2529.gif'/> :f
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfzH0uvznCkg6wFq1Y_w8Nv7AVaDYtLWljLAyYwu3nmcumP1B06yXxJ4y-4mf9bHCBvVjJ6iUJjK6lJaTngFlTxuyYku_zXQsnlDCy4h3sJsKwO7dmVOsCgXiuPBmn8XvPswILRbgnWM/s1600/earningviablog.blogspot.com%25287%2529.gif'/> :g
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_M2sNiUFMCaAN4-Er0HkXZUCx6My59yUBEppZn_fPoCBAnZVUw_8GQYVo1vMWUq0UlU5daQhVs6c0zb7Fkvw3FSsvtJNtVI3KsTJ4U6hFra025sY_xeEuffhci9dYz4aLEc_Dk-OnpP4/s1600/earningviablog.blogspot.com%25288%2529.gif'/> :h
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGMg_0myC7e28Qg7l1EZ7aFFZiHs0QqOWd7f5gKSU0ZI0hFjkMZbW4o3KURNBTIFVxhU7MY4vZUYbe6Qaua9jYZBSjuuIFkQhOe9mskcW7TPtgMnBj7TNVja7HoTHLYKi865drK1akVt4/s1600/earningviablog.blogspot.com%25289%2529.gif'/> :i
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIAl84Nid4dYGaFvsAKkET3XlVelc5L2LR_z-04EEiY-cbqMMKRheghfoBhP5NZPEC4hhoeoD0t3Vwt4TVpG9WZEhCcsWwssBM6YQbFzWB0vxAMuaMzhZ59bxtd15cdPvB2bpnHEBagw/s1600/earningviablog.blogspot.com%252810%2529.gif'/> :j
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWi9VgpNFff7B02MfPDhIoD4Ixj8hFTcdyk8Tiff30xfU3BFNTBwl9Vuc6AftT2xqvahvfapGX_u1CtV57gZXQnqkBjuY4gXCxUP6TxI1iTN1vFIkPJ69TZ3oMAIxfUjtZL3QxL2XzPxg/s1600/earningviablog.blogspot.com%252811%2529.gif'/> :k
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQPfp6NAp2ZLn3s7OdA_r1Z4EDpSRArXB1ImP4uMHhKf4L28Jln0A4_2TpOm58JRSZaF3p4O8fPPFOdKF2VRFMxRfcq2Nqxd-3q5yQMMXdaoTHcCaqEYFMSkqDZl13YnW_cZDFz_ivbI/s1600/earningviablog.blogspot.com%252812%2529.gif'/> :l
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVqFHPJLB0Z1LHFpx0er5IfZ4PuAJlQzFukx8R80ZvudG9DYSyGhxZJ53HGUy5VEeeo5qfgID0S5XSGgfk_S_i8RvKPKKPKFDxdO-UA5a1N-atbYMaJlkJTlH-sx5WCB8AgIETkGr-uc/s1600/earningviablog.blogspot.com%252813%2529.gif'/> :m
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnVVzxlWQ-6X9Pdpvy1Dqnn0IMu6OreOE94rKrGj2yfV8P8NvW4Oq6Amfs_AG_TNcNvn2JCk7vgO-lafmzl_QP6BhYvRaRpuK7vcwipFlkC_XeaZMDAbPXo1LI_MYqB-EewZILAbIR0w/s1600/earningviablog.blogspot.com%252814%2529.gif'/> :n
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpZ51VnmWURL-YuyQzUs5EchDkFCDLpHIxgD74k9H_OBuAB-fOwRmL7dLnF7R7JypzJupN6BChDiLN8hj6MWW3iWL7FhRHBzVzO25u4BUgdtXMhGot6_1q4uJPe0D5YZ-c298Axjqh2k/s1600/earningviablog.blogspot.com%252815%2529.gif'/> :o
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8eaoST8CwsSgSOYvwZkgvrB54-L9_kz4DA2YC1NE_jbB1gWAMp1X45BAtD2WVFg_ree3d5-Y84l4YSpzjmYvO-8xF3U5mCsocJ4BZIJE0zeAVWWLjF8VhBXtHwShMSFxUwq85H8O02h4/s1600/earningviablog.blogspot.com%252816%2529.gif'/> :p
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiBLYNLQv1KDqbjsgM1P_xm-CrGgZ2j0Sg4pMhk5FN8DBU2JxgM9RFO3DIpwJT1Z973kWp3xWj_13gEo1PlF2fFboCDnelYwUp48Dg2N9ARKf8ISu-2wPT35SYPW572Q255zoavn0n-fA/s1600/earningviablog.blogspot.com%252817%2529.gif'/> :q
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwhGsEfikZn2iR2EJSZuFRXVUkPOy40-opN9zQHt9MaBU1jE1uKtRcY5KvvnWAjQoAo0B5lochOBlR3oTCKxYowH9XtYYumXT8vLzlr3XokRXXg_Bog3OvSo1FvyYcYjoVYgU_ClU8mI/s1600/earningviablog.blogspot.com%252818%2529.gif'/> :r
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbO18wXJl7-AWAyTWgQ9DHLEyKrWDFlkdzvc2AIYmAOeCUPHCHqp9XIfTYct06Q_4ylopNafar1fvShA2rdeuDisAXz9DMJe9hGxzzRpGROXRoQegXZ9cHvTk8FxoenAHXI9xAVu3aeI/s1600/earningviablog.blogspot.com%252819%2529.gif'/> :s
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCdWLcKmhUZMgI602tms86DW_q3mVM14I_VKcUHRpkoWa43XdvHcmyBwnGCGi1vWMOOe9C3RmWshdcED-QStHftJvnXozXtpEewoqTcIDQqfQLhYh9DZMHs2usc7HfmnOLaMwnfwhdftw/s1600/earningviablog.blogspot.com%252820%2529.gif'/> :t <a href='http://earningviablog.blogspot.com/2015/11/tutorial-38-add-facemoods-emoticons-to.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>

Step 4: Now search for this piece of code:
</body>

Step 5: And add the following code immediately above it:

Step 6: Save the Template and hopefully, now you can enjoy commenting by adding these cool and crazy emoticons!

Tutorial # 37 - Fancy E-mail Subscription Form of Blogger

0 comments

If you want a simple E-mail Subscription Form, see the previous tutorial - Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot. However if you want to make it a little bit fancy, this tutorial will help you in making so.

Step 1: Follow the Steps 1-6 of the previous tutorial - Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot.

Step 2: Now copy and paste the following code into any webpage or HTML JavaScript widget (by going to Blogger Dashboard > Layout) and make the changes given below.

Customization
- Replace the URL address in line # 3 to change the email icon

- To change the width or the text area, increase/decrease the 190px value in line # 36

- Replace http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog with your Feedburner Email Feed link in line # 40. You can get it by visiting your feedburner account then navigate to "Publicize" and then to "Email Subscriptions".

- In line # 42, replace EarningViaBlog with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog.

Step 3: Now Save your widget and you're done. Check and Enjoy!

Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot

3 comments

Before you add Email Subscription Form to your blog, you need to "Burn" Blogger RSS Feeds at Feedburner.

What is RSS

A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have an RSS feed built in. Whenever you start publishing posts, your latest posts will be updated in the RSS feed. Visitors to your website can subscribe to your blog’s RSS feed.

What is Feedburner

Feedburner is a free web service which enhances bloggers ability to manage their RSS feeds and track usage of their subscribers.

The following steps show you how to Burn Blogger RSS Feeds:

Step 1: Go to Feedburner and sign in to Feedburner with your Google Account (create a Google Account first if you don’t have one).

Step 2: To set up your RSS feed with Feedburner, simply copy the URL of your RSS feed and paste it into the “Burn a feed right this instant” box. Then click Next >>

Step 3: On the next screen, choose the second options - RSS

Step 4: On the next screen you will be given your RSS feed’s new URL on Feedburner. You will want to use this URL anywhere you reference your RSS feed on your blog. Change the feed title and address with your own.

Step 5: At this stage, just click on "Skip directly to feed management".

Step 6: Now you can change the default "Communication Preferences" if you want. This is basically the format of the E-mails which are to be sent to the subscribers.

Step 7: Now copy and paste the code (See screenshot below) into any webpage or HTML JavaScript widget. Your subscription form will be automatically. From there readers can subscribe to receive daily email regarding your newest content.

Now you're done. If you want a fancy type of Subscription Form, see the next tutorial - Tutorial # 37 - Fancy E-mail Subscription Form of Blogger

Step 8: Redirecting All Your Blog Feed To Feedburner - (Optional)
Unless you redirect all your blog feed to Feedburner you won’t get accurate subscriber numbers because some of your readers subscribe using your original blog feed.

To do this:

1. Go to Settings > Site Feed in your blog dashboard

2. Add your Feedburner address to Post Feed Redirect URL and click Save Changes.

3. Now all your feeds is automatically redirected through FeedBurner and you’ll be able to track subscribers. And now newest content will be automatically sent to your subscribers. Enjoy! You may check it by subscribing your E-mail. After subscribing you will receive an E-mail for confirmation which needs to be confirmed before getting daily updates of the newest content of your blog.

Tutorial # 40 - How to Change Default Anonymous Avatar in Blogger Comments

Tutorial # 39 - How To Change Avatar Size In Blogger Comments

Tutorial # 38 - Add Facemoods Emoticons To Your Blogger Comments

Tutorial # 37 - Fancy E-mail Subscription Form of Blogger

Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot

What is RSS

What is Feedburner

Contact Form

Blog Archive

GET LATEST UPDATES TO YOUR E-MAIL!

Popular Posts

Labels