ADD BEAUTIFUL RECOMMENDED POST SLIDE OUT WIDGET TO BLOGGER

http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html

Cái này có trong TQ Tòan Tập: http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/

Slideout Widget is most important for every blog.This widget design is exceptional from other website.Okay first see the demo
I am 100% sure you like it.To see Demo Click Below link.

If you like pls follow the instruction to add this in your website.

step 1: First login your blogger account Click Here login
step 2: Then click Layout>Add a Gadget>HTML/JAVASCRIPT.
step 3: Then paste the below code in box and click save.

-----------------------------------------------------------------------------------------

<div id="bpslidein" style="display:none;">
<div class="help">
?</div>
<div class="expand">
+</div>
<div class="close">
X</div>
<p>
Bài ngẫu nhiên</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("https://css-js-and-css.googlecode.com/svn/trunk/css/blogger-widget.js",function(){},"bp-out-slide")},"jQueryjs")} </script>

step 4:Then top section you see 3 section Save arrangement,Preview,Clear.Click Save arrangement.
step 5:After save then go to template>Edit HTML...and tick on like

Expand Widget Templates.

step 6: Now click F3 or Ctrl+F to search for below code.

<data:post.body/>

step 7: If you find just copy the below code..

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

and paste the code below.

If you like or faces any problem please comment.

CÁch khác

-----------------------------------

eep the visitors glued to your site for long” This is what every blogger out there wants to do. The Recommended Post slide Out Widget does just that. It’s kind of an invitation to the reader to read a new post once he has read one of your blog entries. You might have seen this kind of a widget on many popular websites like New York Times, Mashable, Times of India etc.

Demo Of The Slide Out

Scroll down to the bottom of the post and you should see the Recommended Slide Out.

How To Add The Recommended Post Slide Out Widget To Blogger?

To add the widget to your blog, you can use this one click installer.

Customizing The Recommended Slide Out

End Of Post marker – The slide comes out when the user scrolls down to a particular point in your Blog.(the bottom of the page by default) To mark this point, you can add an HTML element there. The element should have the id bpslidein_place_holder

e.g.: <div id='bpslidein_place_holder'></div> would do the job. The best place to add this marker would be at the end of the post. If you want to do it easily, you can add this to your Blogger Template.

In your template Find,(You will have to expand the Widget Templates)

<div class='post-footer-line post-footer-line-1'>

<p class='post-footer-line post-footer-line-1'>

<data:post.body/>

Immediately below any of these, add the following snippet and save our template

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

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

</b:if>

Now when the reader scrolls down to this div, the slide will open up.

Read more: http://gj37765.blogspot.com/2012/04/add-recommended-post-slide-out-widget.html#ixzz2HrCDiesj

Saturday 13 January 2024