Random Posts Script for Xtgem Blog (xtblog)

As a Blogger, we of course want that our Blog has many visitors. And of course we want our visitors to feel enjoy and stay as long as possible in our Blog. One of widget that can increase visitors spend time on our Blog is the Random Posts.


xtblog logo by weblogwap

Usually random post widget can be placed on our Blog sidebar. While visitors reading articles in our Blog, they may notice the random posts containing an article they may interested, and click it to read more on our Blog thus increasing our pageviews.

If you are an Xtgem user to blogging, don't worry. We can easily add our own random posts widget on our xtgem blog or xtblog using some Javasript.

And here I am, again I will share one of script I made and use on my xtgem blog. As the post title, now I will share you how to create our own random posts widget on our blog on xtgem site or xtblog.

You can view the demo of this random posts script on my xtgem site, the random posts is located on the sidebar of my xtgem blog. (Sorry that I published the blog only on Bahasa Indonesia): unduhapp.wapgem.com.

Random posts script for xtgem blog (xtblog)

1. Include JQuery library

The script was written using JQuery. So first, we must include JQuery library source in our xtgem site. Add the following code in your _headtags file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Create a "random" page

  1. Create a new html file in your xtgem site ROOT directory and named it to: random. This page will be used for AJAX post source call in our random posts script later.
  2. After you have created the random page, next is open it on "code editor" mode. Then add the following code after <body> tag and save it:
    <xt:blog tzone="0" format="Y-m-d" show_time="0" display="1" entries_per_page="50" comments_per_page="3" comments_sort="-1" display_limit="50" display_symbol="..." version="2" hide_tags="1" t_back_to_posts="" t_comments="" t_comments_empty="" t_post_a_comment="" t_name="" t_comment="" t_post="" t_tags="" t_search="" t_created="" t_showing_tagged_posts="" t_no_entries_found="" t_no_search_results_found="" t_show_all_comments="" t_see_parent_thread="" t_show_all_replies="" t_show_replies="" t_reply="" t_posting_as="" t_comments_login_required="" t_login="" t_signup="" t_confirm_email="" t_report_spam="" t_hidden_comment="" />
  3. Allright next, still in editing random file, now open the file in "building tools" mode. Click on "Options" to enter the file settings.
  4. Un-Check all the include options:
    - Include "/_header" file in page header
    - Include "/_footer" file in page footer
    - Include "/global_stylesheet.css" file in page
    - Include "/xtgem_template.css" file in page

    This step is necessarry to make the "random" page as lightweight as possible so it can be fast and less data when we use the AJAX call to this page later in the script.
  5. Check by visiting http://yourxtgemsite/random. If you did it right, you should see your xtblog post list with no header, no footer, and white plain without styling.

3. Add the HTML and Javascript code

The final steps, is add the code. Add it where you want the random posts list to be appear. Usually, you can place it in your sidebar. The main codes:

<div id='random-posts' class='xt_container w3-padding'><h3>Random Posts</h3><ul></ul></div>

<script>
$(document).ready(function(){
	var random = []; var i = 0; var j = 0; var post, postLength, rpi, postIndex;		

	function rndPost(rpi) {
		var title = rpi.split('xt_heading">')[1].split('</span>')[0];
		var url = rpi.split('href="')[1].split('"')[0];
		url = url.replace('/related/', '/index/');
		var item = '<li><a href="' +url+ '"><span class"post-title"><i class="fa fa-sticky-note"></i> ' +title+ '</span></a></li>';
		$('#random-posts ul').append(item);
	}
	
	$.get('/random', function(data){
		post = data.split('xt_item">');
		postLength = post.length-1;	
		for (i=1; i<=postLength; i++){
			temp = Math.floor(Math.random()*postLength + 1);
			if(random.indexOf(temp) == -1){
				random.push(temp);
			}
			else { i--; }
		}
      
		for (i = 1; i <= 10; i++){
          postIndex = random[j];
			rndPost(post[postIndex]);
			j++;
		}		
	});
});
</script>


This random posts script is more likely only works if you are using the the default template file of xtblog. So if you have modified many elements on your xtblog Blog template file, some adjustment may be needed in order for this random posts script to be worked.

Comments on "Random Posts Script for Xtgem Blog (xtblog)"