Slider

How To Add Related Posts Widget In Blogger


I've been struggling to find a way to add the Related Posts widget to my blog ever since i did a blog makeover. The previous template I bought had a Related Posts widget included so i didn't have to worry about it but for the current template, they do not have it so I had to find my own way. Sadly, the post i've found did not work on my blog so i gave up eventually but i was determined to get one once again after i realize how well it actually drives the traffic back to your old blog post. Today I'll show you how to add this widget to your own blog.

1. Set up your Engageya account. Click here and scroll to the bottom. Sign up and confirm your email address by following the instruction given in the email Engageya sent you.

2. Go to here and create your own widget. Name your widget. Choose the layout style, there are rounded and rectangular thumbnails.
Add your website then in the Recommendation Type, select Related content from your blog. With this, it will only show posts from your blog rather than other website. Select Blogger platform then key in your username and password then click INSTALL WIDGET.

A Blogger window will pop up asking you to add the page element. Then you will be taken to Blogger’s layout page where the widget moved in. Move the widget under your blog posts area. Click Save Arrangement and you are done!

If you ONLY want it to appear on the post page and not the home page, continue the following.

1. Go to Template > Edit HTML. Press CTRL+F and search the below code:
<div class='post-footer-line post-footer-line-2'>

2. Open a new tab then go to Blogger > Layout, click the 'Edit' button on the bottom right corner of the Engageya gadget you've already added. Copy the code and paste it right below the code you've searched. It should look something like that in your HTML:
<div class='post-footer-line post-footer-line-2'>
<script>
(function(E,n,G,A,g,Y,a){E['EngageyaObject']=g;E[g]=E[g]||function(){ (E[g].q=E[g].q||[]).push(arguments)},E[g].l=1*new Date();Y=n.createElement(G), a=n.getElementsByTagName(G)[0];Y.async=1;Y.src=A;a.parentNode.insertBefore(Y,a)})(window,document,'script','//widget.engageya.com/engageya_loader.js','__engWidget');
__engWidget('createWidget',{wwei:'ENGAGEYA_WIDGET_84531',pubid:162511,webid:123948,wid:84531});
</script>
<div id="ENGAGEYA_WIDGET_84531"></div><script src="http://widget.engageya.com/engageya_blogger.js" id="eng_blg_widget"></script>

 Add the following code infront of the <script>
<b:if cond='data:blog.pageType == "item"'>
IMPORTANT: after adding the above code, close the code by adding
</b:if>
behind </script>

So, at the end of the day, your code should look something like this:
<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:blog.pageType == "item"'><script>
(function(E,n,G,A,g,Y,a){E['EngageyaObject']=g;E[g]=E[g]||function(){ (E[g].q=E[g].q||[]).push(arguments)},E[g].l=1*new Date();Y=n.createElement(G), a=n.getElementsByTagName(G)[0];Y.async=1;Y.src=A;a.parentNode.insertBefore(Y,a)})(window,document,'script','//widget.engageya.com/engageya_loader.js','__engWidget');
__engWidget('createWidget',{wwei:'ENGAGEYA_WIDGET_84531',pubid:162511,webid:123948,wid:84531});
</script>
<div id="ENGAGEYA_WIDGET_84531"></div><script src="http://widget.engageya.com/engageya_blogger.js" id="eng_blg_widget"></script></b:if>
Anddd you are done! Click save and test it out. The Related Posts widget should only appear on your post page when you click your jumplink (e.g Read More, Continue Reading ect.)

If you would like to remove the "You might enjoy reading:" or whatever you typed, add this code:
#git_title_bar { display: none !important; }

Post a Comment

© Rosy Face. Design by FCD.