recommendation posts ~ ilmu

ve a recommendation posts slide out widget to your site users to be a wonderful tool for increase traffic in your blog. This method can reduce the percentage of pages out of your site. So that your users will be more comfortable to dive into your site.

recommendation post slide out widget page

Previously we have provided a tutorial to increase traffic in your blog. Among them is a horizontal popular post, table of contents, multilabel recent post, recent post of feedburner, high quality blogger pagination, breadcrumb, and others. It turns out this tutorial proved successful. You can analyze it through the Google Analytic Traffic Flow. With the slide outwidget can certainly increase the amount of traffic in your blog.

Widget of recommendation posts slide out is very interesting and contains elements of animation. Because we are using jquery. Not only that, you can adjust the layout, animation, sentences of this widget. It's really easy to use.

The idea of making recommendation posts slide out widgets that have long been wanted to made. We are trying to find interesting ideas for the shape of widget. We are thankful to http://wpaoli.building58.com, he gives us an interesting idea.

Practice, click Design -> Edit HTML -> click Expand Widget Templates (for the old interface), or click Template -> Edit HTML -> click Expand Widget Templates (for the new interface). Then place the following code before </ head>

<style 
media='screen' type='text/css'>.slide-out-div{padding: 5px;width: 
250px;background: #f2f2f2;border: #29216d 2px solid;}</style>  
<script 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' 
type='text/javascript'/>  <script 
src='https://for-threelas-site.googlecode.com/svn/trunk/jquery.tabSlideOut.v1.3.js'/><script
 type='text/javascript'>
           var firstsen= "Read recommended article below";
$(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the 
element that will become your tab
            pathToTabImage: 
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgciIqkMiGvcNpKY3-Uj-C9R2_BMXpr_vT7aVc82g-X3YJkawk0XzwuBdW0CEHplDldGdajwRqQsSBh42p_gqobNheGGKpRZhhRIRaUiMU3JmLpQ9SxlOWfI3Zy82hzD5AB_NFJG07DOOw/s160/recommendation.jpg',
 //path to the image for the tab //Optionally can be set using css
            imageHeight: '160px',                     //height of tab 
image           //Optionally can be set using css
            imageWidth: '40px',                       //width of tab 
image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen 
where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of 
animation
            action: 'hover',                          //options: 'click'
 or 'hover', action to trigger animation
            topPos: '200px',                          //position from 
the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from 
left/ use if tabLocation is bottom or top
            fixedPosition: true                      //options: true 
makes it stick(fixed position) on scroll
        });

    });</script>

You can replace the phrase "Read article below recommended" and "or find all related posts on" with another sentence. You can also change the format of the image, animation speed, mouse event (click or hover), and others. Next, place the following code anywhere inside <body>. We put it before </ body>

<div 
class='slide-out-div'>
  <a class='handle' href='#'>Content</a>
        
  <script 
src='https://for-threelas-site.googlecode.com/svn/trunk/recommended.js' 
type='text/javascript'/>  
 <script 
src='http://www.threelas.com/feeds/posts/default?alt=json-in-script&max-results=1000&callback=recentposts'
 type='text/javascript'/>
     
    </div>

Announcement

When we make this post, is pregnant for the second child. So sorry if we do not often post. However, we continue to post with best quality.

Updated, March 12, 2012
Know, this widget not only show post title with link. But also show the picture. If you are using old code, this widget still working. You can delete var secondsen, because we are not using that variable anymore. This based on our survey.

ilmu

recommendation posts

0 komentar:

Posting Komentar

Archives

Pengikut