This widget not only glued your visitors but also recommend new article to read after finish previous article.
You might seen these this widget on many popular websites or blogs.
I too loved the idea and found out that some one else had already made a jQuery snippet which does just the same.
I have made some modifications to the snippet so that it gets loaded asynchronously without affecting the page load. The Slide out will show random posts from
your Blog. The random posts are fetched from your Blog Feed using Ajax.
How to add blogger recommended for you slider
Follow these simple step to add this awesome widget on your blog......This slide come after end of post with the reason when some one finish reading article then another one can recommend him immediately..Step 1. Go to blogger template section and find <b:skin>..</b:skin> then paste following code before </b:skin>
#bw4all{z-index:5;width:400px;height:100px;padding:10px;background-color:#fcfcfc;border-top:3px solid #CC3333;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#bw4all p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bw4all_title{color:#CC3333;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#bw4all a,#bw4all a:hover,#bw4all_title{text-decoration:none;color:#1616F5;}
#bw4all .close,#bw4all .expand,#bw4all .help{border:2px solid #EEE;cursor:pointer;color:#CC9999;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#bw4all .help{right:35px;}
#bw4all_title,#bw4all_image{float:left;width:80px;}
#bw4all_title{width:290px;}
Step 2. Paste following code just above <b:skin>
<script>var bw4all_custom_css=true;</script>
Step 3. Now search for <data:post.body/> and immediate after place following code.
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bw4all_place_holder'></div>
</b:if>
Save your template..
Step 4. Now go to layout and add a HTML/JavaScript widget the place following code and save widget.
<div id="bw4all" style="display:none;"> <div class="help">?</div><div class="expand">+</div>
<div class="close">X</div> <p>Recommended for you</p> <div id="bw4all_image"></div>
<div id="bw4all_title">Loading..</div> </div>
<script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://recommended-slide-out-for-blogger.googlecode.com/svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://www.bwidgets4all.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuDnHAymWvi8ckOOQnCYmAPzzZMpRi7wmiVeGNHU0AjHMK3QldQ-H4FxRfQubNE1WXgbiYWm0j94haXQlw43SFfup8Dz0NIpLYaicp5jeLaUO3nPvbphPveqkNHAGCdF9gcPcAsbbM2aI/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>
Hi! I am K Ajay, currently live in Chandigarh, India. A young Web Designer, Pro Blogger, Graphic Designer & an addicted Web Developer. I love working on Blogger and WordPress using CSS Tricks,and Web Designing.
0 comments:
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).
Post a Comment