Open top menu
Tutorial # 42 - Google Translate Widget with Flags For Blogger

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language. This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese.

Step 1: Go to your Blogger Dashboard > Layout, and click on "Add A Gadget" link. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3: Paste the code below in the empty box:

Step 4: Now click on Save

Read more
Tutorial # 41 - How to Remove "Showing Posts With Label" in Blogger

As a default, whenever we click on a label link the "Showing posts with label" message appears above the posts as shown below.
For many of us, it is quite annoying and useless. If this is the case with you, you may remove it just by following the steps below.

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 <b:includable id='status-message'> inside the search box and hit Enter to find it


Step 3: After you found it, click on the sideways arrow next to it, to expand the rest of the code.

Step 4: Replace the code with the one given below


<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 5: Save the template. Now view your blog and click on some label....there should be no box anymore.
Read more
Tutorial # 40 - How to Change Default Anonymous Avatar in Blogger 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

Read more
Tutorial # 39 - How To Change Avatar Size In Blogger 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.


Read more
Tutorial # 38 - Add Facemoods Emoticons To Your Blogger 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
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1DcybTNS50zTBDaeoDXmxdI9FuoKSVDFKiB0NvOiUMz8TwE9BZvcThFHhxjmvz_gQzJk5UsjA7QAN37YuPsop0ShTXxhCVg5TL25rH41CwpXAaXhWplUftwUeG8QhmXTxcetY0_dwtY/s1600/earningviablog.blogspot.com+%25282%2529.gif'/> :b
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwc8hIaWiA9kwhzW2vmTQ6ng7bC10vHaO7tQw6WaqmP3z2kUPagB_hYVc7jDK2UfDTke0M9zWIad6kNXXXrCgHYSHHLOaCvu6VuCGkl4z4C8piG-Yxh6C1a0uiViwP6Z0aMsvJsuwbmU/s1600/earningviablog.blogspot.com%25283%2529.gif'/> :c
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_s1XMhEUACIHMtEHJ1nxCywUSV6zZ0Waqdicb9wYZqeBCCk3rDpfZSeV0dH4_d_j5AGlqh1cwBIRklGwbSSoP9aW7fxZANwK1zNoeH1cs-RMDsXGjIC0oIDj62UAxmx9T13k7hfjvh14/s1600/earningviablog.blogspot.com%25284%2529.gif'/> :d
&#160;
<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
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjHT2M7SkUsDPVKYD2-4ot1FX4-6l6E5HuUIXIiKhg4nfI9RwUtKXdLZBj3gh7gcZh5d0nKzf6znNudSSfxJFtdXNWILJk3AnwZ_2ZOsFBfKXjALQV_EnmqQadcEkB0GQQBtzBOzIvSg/s1600/earningviablog.blogspot.com%25286%2529.gif'/> :f
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfzH0uvznCkg6wFq1Y_w8Nv7AVaDYtLWljLAyYwu3nmcumP1B06yXxJ4y-4mf9bHCBvVjJ6iUJjK6lJaTngFlTxuyYku_zXQsnlDCy4h3sJsKwO7dmVOsCgXiuPBmn8XvPswILRbgnWM/s1600/earningviablog.blogspot.com%25287%2529.gif'/> :g
&#160;
<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
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGMg_0myC7e28Qg7l1EZ7aFFZiHs0QqOWd7f5gKSU0ZI0hFjkMZbW4o3KURNBTIFVxhU7MY4vZUYbe6Qaua9jYZBSjuuIFkQhOe9mskcW7TPtgMnBj7TNVja7HoTHLYKi865drK1akVt4/s1600/earningviablog.blogspot.com%25289%2529.gif'/> :i
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIAl84Nid4dYGaFvsAKkET3XlVelc5L2LR_z-04EEiY-cbqMMKRheghfoBhP5NZPEC4hhoeoD0t3Vwt4TVpG9WZEhCcsWwssBM6YQbFzWB0vxAMuaMzhZ59bxtd15cdPvB2bpnHEBagw/s1600/earningviablog.blogspot.com%252810%2529.gif'/> :j
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWi9VgpNFff7B02MfPDhIoD4Ixj8hFTcdyk8Tiff30xfU3BFNTBwl9Vuc6AftT2xqvahvfapGX_u1CtV57gZXQnqkBjuY4gXCxUP6TxI1iTN1vFIkPJ69TZ3oMAIxfUjtZL3QxL2XzPxg/s1600/earningviablog.blogspot.com%252811%2529.gif'/> :k
&#160;
<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
&#160;
<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
&#160;
<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
&#160;
<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
&#160;
<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
&#160;
<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
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwhGsEfikZn2iR2EJSZuFRXVUkPOy40-opN9zQHt9MaBU1jE1uKtRcY5KvvnWAjQoAo0B5lochOBlR3oTCKxYowH9XtYYumXT8vLzlr3XokRXXg_Bog3OvSo1FvyYcYjoVYgU_ClU8mI/s1600/earningviablog.blogspot.com%252818%2529.gif'/> :r
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbO18wXJl7-AWAyTWgQ9DHLEyKrWDFlkdzvc2AIYmAOeCUPHCHqp9XIfTYct06Q_4ylopNafar1fvShA2rdeuDisAXz9DMJe9hGxzzRpGROXRoQegXZ9cHvTk8FxoenAHXI9xAVu3aeI/s1600/earningviablog.blogspot.com%252819%2529.gif'/> :s
&#160;
<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!
Read more
Subscribe to: Posts (Atom)