Sunday, April 23, 2017
Creating Recent Comments Widget on the Blog Sidebar
Creating Recent Comments Widget on the Blog Sidebar
After we give the style to the comments of content posts, the next is how to create recent comments as a widget on the sidebar of our blog, so that all the recent comments contained in every post that you created can be seen easily. Recent Comments will display the latest comment at the top and the older at the bottom and then we must limit the number of comments that will displayed. Recent Comments Widget in my opinion gives the impression of our blog more make it more interactive and lively. Therefore, it is one widget that have worthy to be placed on the sidebar.
Recent comment widget consists of javascript to take the comments that contained in the post contents and will displayed in the number and length of comments that you set up. And the css style script to make the style of recent comments will displayed. I prefer to place css style script on the skin and the javascript of the recent comments placed on the gadget blog on the sidebar.
Javascript of Recent Comments :
<script type=text/javascript> var numcomment = 14, numcharacter = 200, home_page = "http://agratitudesign.blogspot.com"; </script> <script src=http://agratitudesign-template.googlecode.com/svn/trunk/blog-rc-comments.js type=text/javascript/>
Descriptions :
- numcomment: the number of comments that will shown on the recent comments widget
- numcharacter: the maximum number of character comments that will shown
- home_page: the url address of your blog, changes by the url homepage of yours !
- blog-rc-comments.js: javascript link which is a system of recent comments widget, you can use it directly, or copy the link into google project hosting of yours.
CSS Style script :
#comment { font:normal 11px Tahoma,Verdana,Arial,Sans-Serif; background-color:#B59457; margin:0px 0px; padding:10px 10px; color:#000; border:4px solid #B59457; -webkit-box-shadow:inset 0px 0px 2px #000; -moz-box-shadow:inset 0px 0px 2px #000; box-shadow:inset 0px 0px 2px #000; } #comment ul { margin:0px 0px; padding:0px 0px; border-top:1px solid #5F4820; border-bottom:1px solid #9D6B1A; } #comment ul li { border-top:1px solid #9D6F1A; border-bottom:1px solid #5F4220; padding:3px 0px; list-style:none; } #comment ul li b a, #comment ul li b a:link, #comment ul li b a:visited, #comment ul li b { color:#FFFFFF; text-shadow:0 1px 1px rgba(0,0,0,0.4); } #comment ul li b:before { content:url(http://agratitudesign-template.googlecode.com/svn/trunk/feed-icon.png); margin:0px 4px 0px 0px; display:inline-block; *display:inline; vertical-align:middle; } changes the color of recent comments widget style as you can, if not just use this style
1. First we shall place the css style script on the skin of template. As usual go to blogger dashboard, and click on Template>Edit HTML. Then Type ]]></b:skin> to find the skin at the end, and place the css style script just above ]]></b:skin> then you save it!
2. Put the javascript of the recent comments to the gadget blog sidebar. Still on the dashboard click on Layout. On the Layout select a gadget at the sidebar position where the recent comments widget you want to be placed. Then on the basic gadget, click on HTML/Javascript gadget, and put the Javascript inside as shown like the right picture below! then you save it!
If you use the template by blogger standard copyright and did not have much change in the system of the template blog, recent comments widget will be working properly and displayed as well on your blog sidebar. However, if you do many change on the template blog system or create any template by your own it is possible that makes the recent comments is in problem. For example for those of that was created the template by artisteer, recent comments widget will not work properly, have you found the problem like me? the next is how to get the solution about recent comment is in problem.
Available link for download
