Creating Custom Blog Details Page (Liquid code)

I have created custom web template which retrieve all the blog post and display on the web page.

Now I want when user click on any of the blog post that blog post should get open. For Blog Post we don't want to open out of the box blog post detail page we want to create custom page for that and want to show detail.

Any idea how this can be achieve?

Liquid code which I have written to render all the blog post is:

{% fetchxml res %}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
 <entity name="adx_blogpost">
 <attribute name="adx_name" />
 <attribute name="adx_published" />
 <attribute name="adx_partialurl" />
 <attribute name="adx_date" />
 <attribute name="adx_blogid" />
 <attribute name="adx_authorid" />
 <attribute name="adx_blogpostid" />
 <attribute name="adx_copy" />
 <attribute name="new_url" />
 <attribute name="adx_summary" />
 <attribute name="adx_commentpolicy" />
 <order attribute="adx_name" descending="false" />
 <filter type="and">
 <condition attribute="new_account" operator="eq" value="{{user.parentcustomerid.id}}" />
 </filter>
 </entity>
</fetch>
{% endfetchxml %}

 {% for result in res.results.entities %} 
 <div name="content" style="padding: 15px 30px 0 0; clear: both;">
 <h5 style="color:red; font-weight:bold"> {{ result.adx_summary }} </h5>
 {% assign summary = result.adx_summary %}
 	<div name="image" style="width: 300px; height:146; float: left; padding: 0 0 0 15px;">
 	 <img src="{{ result.new_url }} height="150" width="150" >
 {% assign image = result.new_url %}
 	</div> 		
 	<div name="main-content" style="; margin-left: 300px; max-width: 800px;">
 		<p> {{ result.adx_copy | truncate: 500 }} </p>
 {% assign content = result.adx_copy %}
 		<br /> 			
 	</div> 		
 	<div class="clear"></div>
 </div> 
 {% endfor %}

and when user click on any of the post detail of that post should get open on another page.

Quick Links