Blogs have generally Comment Section so that your user can comment or ask any question related to post.Comment Section is very useful for both author and visitor. and also useful in increase traffic of blog.
So i am providing you a widget where recent comment is rotate so that more comment is show in widget and Dynamic Widget is more useful as you know . In this Widget you could be Easily customize in your blogs look.
How to Add this Widget on blogger?
- Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML)
- Find
Ctrl +F for the code below
]]></b:skin>
- Just above that paste any one of the following code.
For Light Theme:.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJidQ3HoUYO81qamlA_YmTCmBrB6lYguVGhq_unEcd1bLXu8XkqHQbfPjuwvsQtB7sudrMVvN1LkEpJFYA6KvJ67_EVbqShEneTggvk5CgM-Z3ufpJmgBWyPOYVksLzo4_0qeLV8oHLVI/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white}
ul#kmtranimasi p{margin:15px 0 0}
For Dark Theme:.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJidQ3HoUYO81qamlA_YmTCmBrB6lYguVGhq_unEcd1bLXu8XkqHQbfPjuwvsQtB7sudrMVvN1LkEpJFYA6KvJ67_EVbqShEneTggvk5CgM-Z3ufpJmgBWyPOYVksLzo4_0qeLV8oHLVI/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black}
ul#kmtranimasi p{margin:15px 0 0}
Now another part is add HTML code where want to add widget.
- Now go to Blogger Dashboard > Layout
- Click on Add a Gadget (below header)
- Select HTML/JavaScript
- Copy below code and paste inside it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script>
<div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
rccommnetsx({
id_containrc:"#rcentcomnets",
animatedRecentcomments:true,
numComments:10,
url_blog:"URL_blog",
adminBlog:"blogsfunda blogger/google+"
});
});
//]]>
</script>
- Change URL_blog to your Blog URL.
- numComments:10 Change no of comments will display.
- and save it.
I hope you like this beautiful widget for blogger, If you still have any problem please share it by using a comment, Thanks.
0 comments:
Post a Comment