Thursday, 3 October 2013

How to Display Recent Posts in Blogger

Displaying Recent posts in your sidebar often help your users to quickly take a look at the content that is more new and fresh. It also gives them a basic idea that what kind of content is published on a certain blog. If the most recent posts are somewhat linked to each other, then it might engage your visitors for a bit longer.  However, in some designing methods people want to display recent posts differently according to their design. In this article, we will show you How to Display Recent posts in Blogger.

Display Recent Post With A Summery in Blogger?

Some people have different approaches of showing recent posts in their blogs. They want them to be with a title and a short description, so that users can get some idea about the topic. There're multiple ways of doing that, but we have listed below the most simplest and work friendly method.

The first thing you need to do is to go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following code in the HTML Text Area. Remember: Don’t forget to replace GSMForest.com with your personal domain name.

<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
 <script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails =  false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.gsmforest.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

You may change the character limit by replacing (100) with any other according to your needs. Once everything is done, save the gadget.

Displaying Recent Posts in a List Format in Blogger?

Some people want things to be as modest as possible, this is the reason why they want to show recent posts with just post titles in a list format.

<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
<script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>
 <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.gsmforest.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

You may change the number of posts to be shown in the gadget by replacing 10 with any other number. You can simply paste the code in the HTML/JavaScript gadget's area or you can also use them in your post pages. Once everything is done, save the gadget.

Displaying Recent Posts with Thumbnails in Blogger?

Sometimes people want things to be perfect. As we all know picture speaks a lot than words, so adding a small thumbnail to recent posts might help in grabbing the attention of your visitors. You can customize the thumbnail size through a simple CSS, but it might get distorted as it is originally small.

To add this in your blog, Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following code in the HTML Text Area. Once everything is done, after customizing save the gadget.

<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
 <script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.gsmforest.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

Congratulations: You have successfully learned how to display Recent posts in blogger. Go and check out your blog to see things are working perfectly or not.

We hope this article have helped you in learning a way to display recent post in your blogger site. You can even display posts by using your labels. However, we will discuss them in the upcoming tutorials. If you like this article do share it on Facebook and other social web.

How to Easily Add PHP Codes in Blogger

PHP is considered as the most powerful computer language that makes things happen with the glimpse of seconds. However, PHP is not supported by Blogger or BlogSpot running platform which makes it extremely difficult to customize and implement some new latest developments, but there are still some ways through which you can add PHP codes in your Blogger enabled Website. Though, the results are not 100%, but it is far better than not having a PHP code on your blogger site. In this article, we will show you how to add PHP codes in Blogger.

Step1: Creating a PHP File:


Before you can add PHP Codes in blogger, you have to first create a PHP file in which you have to use all the PHP codes that you would like to use.  However, make sure that the file is free from errors otherwise things would not look good. Following is the simple Hello World PHP code example, just for a basic guideline for some beginners

<?php
echo '<p>Hello World</p>';
 ?>

After creating the file with all your desired codes make sure you save it in .PHP extension. For example, GSMForest.php, you can use NotePad++ for writing codes because it is the only FREE standard developing tool.

Step2: Hosting a PHP File:


Since, blogger does not allow you to host any kind of files like PHP, HTML or CSS. Therefore, you have to either host it on your hosting (if you have) or you can use Google Drive to host them for FREE. We have already written a detailed tutorial on It,

You can also use Dropbox, and many other free hosting services but certainly they are not better than the features and reliability of Google Drive.

Step3: Adding  PHP Codes in Blogger


After creating and hosting the PHP file, login into your Blogger account. Once logged in, head over to the dashboard and select the blog on which you would like to add PHP Codes. Now it depends on your needs whether you want to add the PHP code in posts, pages, sidebar or footer. Just paste the following code anywhere you would like to display the PHP file.

<object width="400" height="300" type="text/html" data=" your-file.php"></object>

Don’t forget to replace your-file.php with the URL of your own PHP file that you may have got while hosting it on services like Google Drive Dropbox and etc.

Congratulations: You have successfully added PHP codes to blogger. Go and check your blog to see if things are working as planned. Let us know, if you have a better way of doing this job.

We hope this tutorial has helped you in learning how to add PHP codes in blogger. Still, this is not the most accurate way because we are just using a iFrame technique to include the codes. Blogger needs to think more on making its platform friendly for the developers so that they can bring awesomeness to their blogs and websites.