Skip to main content

Recommended Post Slider Widget for Blogger with Twitter / Facebook share button

Image
By
In this post I have an awesome new gadget that can be seen Wordpress blogs is now available for Blogger.Recommended post slider in each post is interesting widget.Those of you who follow some Wordpress blogs have seen the recommended or related posts slider.You may have seen this type of widget in many popular websites like The New York Times, Mashable, Times of India, etc.The widget is originally developed by bloggerplugins, i just changed something in the widget.It keeps readers to read more pages of your blog.





How to Install Recommended Post Slider Widget for Blogger with Facebook,Twitter share button



I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget



2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.



<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="https://bitly.com/24workpng1" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style type="text/css">#recslide{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #000;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-6px -5px 5px #aaa; font-family:Arial, Helvetica, sans-serif;}#recslide p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#000; font-weight: bold;}#recslide_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}#recslide a,#recslide a:hover,#recslide_title{text-decoration:none;color:#FE3F10; padding: 5px 5px 5px 2px;}#recslide .close,#recslide .expand,#recslide .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;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;}#recslide .help{right:35px;}#recslide_image{float:left;width:80px;}#recslide_title{width:287px;height:30px;overflow:hidden;}</style><div id="recslide" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p><div id="recslide_image"></div><div id="recslide_title">Loading..</div><center><div id="share_box">loading</div></center></div><script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bts_onload_queue=='undefined')var bts_onload_queue=[];if(typeof bts_dom_loaded=='boolean')bts_dom_loaded=false;else var bts_dom_loaded=false;if(typeof bts_async_loader!='function'){function bts_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(bts_dom_loaded){newcallback()}else bts_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bts_domLoaded!='function')function bts_domLoaded(callback){bts_dom_loaded=true;var len=bts_onload_queue.length;for(var i=0;i<len;i++){bts_onload_queue[i]()}}bts_domLoaded();bts_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bts_async_loader("http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recommended/recommended-Slide-v1.0.js",function(){},"bts-out-slide")},"jQueryjs")}</script>

And now click Save



Optionally use this Widget installer to add this link to your blogger blog.


Click the following image to add the widget to your blogger:












And now click Save


if you want slide come out whenever you reach the end of post, then follow this instruction:



Adding Recommended post slider widget below posts



I have seen few who are showing the Recommended post slider of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.



I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.




In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.





Now find (CTRL+F) this code in the template:

<data:post.body/>
or
<div class='post-footer-line post-footer-line-1'>
or
<p class='post-footer-line post-footer-line-1'>

Immediately below any of these, add the following code and save Template:

<b:if cond='data:blog.pageType == "item"'>

<div style='display:none' id='recslide_place_holder'></div>

</b:if>


Now you can see a beautiful Recommended post slider appearing below the posts in your Blog.
































How to Install Recommended Post Slider Widget for Blogger




So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..


<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="https://bitly.com/24workpng1" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="bpslidein_image"></div> <div id="bpslidein_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://24work-new.googlecode.com/svn/trunk/24work-blogspot/recommended/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script>





And now click Save



Optionally use this Widget installer to add this link to your blogger blog.


Click the following image to add the widget to your blogger:












And now click Save


if you want slide come out whenever you reach the end of post, then follow this instruction:



Adding Recommended post slider widget below posts

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.



Now find (CTRL+F) this code in the template:

<data:post.body/>
or
<div class='post-footer-line post-footer-line-1'>
or
<p class='post-footer-line post-footer-line-1'>

Immediately below any of these, add the following code and save Template:


<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Now you can see a beautiful Recommended post slider appearing below the posts in your Blog.











Many thanks to breakthesecurity or bloggerplugins for making this code and I just tested and modified to work on blogger




Labels:

Comments

Post a Comment

Popular posts from this blog

5 tips to Voice Speech Recognition in Android Marshmallow

By Unknown
Android Marshmallow landed on our Android devices. The opportunity for us to offer a small compilation of tricks to try immediately. The latest version of the Google OS starts (very gently, unhurriedly) to be offered on other devices as Nexus. You will find on Android TM, in the coming weeks, a compilation of the best tips for Android 6.0 Marshmallow. It starts slowly with a video featuring the 10 essential tips & tricks of this new version of the little green robot OS. To continue, we offer a selection of five "tricks" on the management of the battery on Android 6.0 Marshmallow. To enjoy longer your newly updated mobile. Follow the guide. then continue with 5 tips to tame the super-assistant Google Now on Tap. Here you will find 5 "tips" to manage in the best way your applications. We then discuss the quick tips to navigate more easily on this version of the Google OS. We enchanters with features focused on safety and the protection of personal data. We co...
Post a Comment
Read more

Energy Android TV Play turns your TV into a Smart TV

By
ENERGY SISTEM Android Energy TV Play, you have a smart TV with Android operating system allows you to convert any traditional TV has announced the launch of a new product. Energy Android TV Play can be connected to the TV to enjoy f the size of a flash drive, a smart phone, a tablet and a computer unconsolidated is a lightweight device. System 1.6 GHz, DDR3 1GB of RAM and a dual-core processor can be expanded using external USB devices, which is the internal memory of 8 GB. It also integrates WiFi and a USB port for connecting external devices. One of its outstanding features, it is easily connected to the TV screen by screen cast application to display the contents of any terminal, making any phone or tablet is synchronized with iOS or Android. All ENERGY SISTEM products one click In addition, through streaming media service applications, images, video or other multimedia content, and game play is the ability to share. With integrated WiFi, the device you want from t...
Post a Comment
Read more

How to run Python apps on any platform

By
Credit: Adam Sinicki / Android Authority Want to know how to run Python? It sounds simple, but it can actually be tricky to figure this out. In this post, we’ll discuss how to test your Python code, as well as how to run Python in other contexts: online for example, or as a packaged app. Sometimes, the thing holding you back from learning to code can be extremely simple. I remember wanting to learn to program when I was younger – or learning to take what I’d learned from BASIC on the ZX Spectrum and apply that to a modern environment. My problem? I didn’t know “where” to program. Once I understood C# or Java, where would I enter the code and how would I run it? And whenever I asked someone, they would look at me blankly. What kind of a question is that? Thing is, I had never needed an IDE or an interpreter before. Machines like the ZX Spectrum and Tatung Einstein (any other Einstein users out there?) simply booted up with a prompt to code into! Many people have a similar iss...
Post a Comment
Read more