Open top menu
Tutorial # 44 - Recent Posts Widget with Thumbnails for Blogger/Blogspot

In the previous tutorial, Tutorial # 43 - Simple Recent Posts Widget for Blogger/Blogspot, we have learnt to create a Recent Posts Widget. In this post, you will see a different way of displaying the Recent Posts on Blogger - this is specially for those who want to show the post thumbnails as well.

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 2: Paste the code from one of the options below in the empty box of HTML/JavaScript:


Step 3: Customization
- Replace YOUR-BLOG in line # 3 with the URL of your site/blog (ex: http://earningviablog.blogspot.com) and pay attention to have no forward slash symbol "/" at the end of the URL.
- To disable the scroll bar, remove the number 500 in line # 4.
- By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 in line # 4 with the number of posts that you want to appear
- If you want only the posts titles, change true to none and "0" from padding-top:0px with 10 in lines # 10 and 9 respectively.

Step 4: Save your widget. And you're done!


Read more
Tutorial # 43 - Simple Recent Posts Widget for Blogger/Blogspot

Blogger itself contain many widgets related to "posts" like "Popular Posts" but unfortunately there is absence of a Recent Posts widget. If still you want such a widget, this tutorial will guide you to create your own.

This Recent Post widget has two variations, you can have it with both the title and snippets of post, or with post titles only. To make it fit your own design, you will need to modify the CSS style in order to make the following changes:-
- Display post titles only
- Change the number of posts
- Change the number of characters of the post snippet/excerpt
- Change the link or background color, the size and color of text/links.
- Show/hide the post dates

However there is the absence of thumbnails of the posts. If you want such thumbnails as well, see our next tutorial, Tutorial # 44 - Recent Posts Widget with Thumbnails for Blogger/Blogspot

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 2: Paste the code from one of the options below in the empty box of HTML/JavaScript:

Option 1: Recent Posts Widget with Snippets:


Option 2: Recent Posts Widget Showing Post Titles Only:


Step 3: Customization:
- Change 5 (option 1 in line # 5) and 10 (option 2 in line # 3) with the number of posts that you want to display.
- Change false to true in line # 3 if you want the posts dates to appear
- Change 100 (option 1 in line # 5) if you want more characters to be displayed.
- To change the color and font size of the links, modify the values in line # 11 in option 1 and in line # 7 in option 2 (links) and line # 11 and in line # 7 in option 2 (font-size) respectively
- To change the style of posts summary, modify the values in green (color) and orange (font size)
- Replace the http://blog-address.com text with your URL

Step 4. Save your widget. And that's it! Enjoy!

Read more
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
Subscribe to: Posts (Atom)