Tuesday 15 September 2015
Recommended Post Slider Widget for Blogger with Twitter / Facebook share button
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.
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:
Immediately below any of these, add the following code and save Template:
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..
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:
Immediately below any of these, add the following code and save Template:
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 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.
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>
<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>
<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.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment