How To Make Recent Post With Cool Effect For Blogger - Getting something in another way is fun. Moreover, it can be used by others as well. In order to get an idea of posts for my tutorial, I tried to combine the two pieces of existing tutorial to make Blogger recent post with peekaboo effect. Peekaboo effects or Peek A Boo, in this case your recent post will appear when the page scroll and reach the bottom of the page. Well this one we use to show recent post of your Blog. The trick is removing the element-element that is not needed and is not using jquery widget so it's quite mild.Remember! Recent post will show when the visitor scroll your blog post. How do you want to try it, too ? Please follow the steps below. Before going to the tutorial, I would like to show you Demo of this Recent Post.
Please copy the CSS code below and save the above code </head>. This widget will appear only on post pages and do not appear on mobile devices.
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'>The next step, Please copy the code below and save the above code </body>.
<style type='text/css'>
img.recent-post-thumb {width:130px;height:80px;float:right;margin: 5px 5px 5px 10px;}
#recent-posts-container {float: left;width: 100%;min-height: 55px;margin:0 auto;padding: 0;font-size:12px;}
ul#recent-posts-container {list-style-type: none;padding: 0px; }
ul#recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul#recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul#recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul#recent-posts-container li{padding:5px 5px 5px 10px;min-height:50px;list-style-type:none;margin:0;color:#777;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:right}
#recent-posts-container a { text-decoration:none; }
#recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight:500;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
div#peekaboo{position:fixed;bottom:0;right:-352px;padding:0;width:300px;height:auto;font-family:inherit}
.peekaboo-title{font-size:130%;font-weight:900;background:#333;color:#fff;padding:8px;margin:0}
.peekaboo-close{float:right;cursor:pointer;}
</style>
</b:if>
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'>Please SAVE your blog's HTML and open one post page then scroll the page to the bottom to see the appearance of his recent post.
<div id="peekaboo">
<div class="peekaboo-title">The Hottest Post<span class="peekaboo-close" onclick="hidepeekaboo()">&times;</span></div>
<script>
//<![CDATA[
!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="http://yourjavascript.com/9532499811/recent-post-thumb.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs\"></scr" + "ipt>");
//]]>
</script>
<script>
//<![CDATA[
function resizeThumb(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r].width=t,m[r].height=t}resizeThumb("recent-posts-container",130);
function hidepeekaboo(){var e=document.getElementById("peekaboo");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>
</div>
</b:if>
Advertisement
EmoticonEmoticon