The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.
Before we use this, we of course, want to share it with you :)
So, let’s get started!
The Markup
The HTML structure is going to be a list with some nested elements inside: the main div with the thumbnail, the span for the title and the span with the two links;
<div id="rp_list" class="rp_list">
<ul>
<li>
<div>
<img alt="Wonderland [Rock]" width="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDINprua52dxTZWX1vUgL5mQ83cTDF65WjmMISTQE21yHLqhjvoI8chMMEZxj4UknslraIFmd4wTyDwvXzO5BgvWbUO990g31U5qRKiIvxaj5pgoOBY_sCs2LuLKC1GFDhFsc9Se2fmMA/s400/06162011won_won.jpg" height="70"/>
<span class="rp_title">Wonderland [Rock]</span>
<span class="rp_links">
<a target="_blank" href="http://natamp3.blogspot.com/2011/06/wonderland-wonderland.html">Article</a>
<a class='a2a_dd' href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fnatamp3.blogspot.com%2F&title=Natamp3&description=">Share</a>
</span></div></li>
<li>
<div>
<img alt="Simple Plan [Rock]" width="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMY59HiWsj7NMmsHmhqpqxHk9hS0jJbqYVEffMLy14AJYpiq44rGQcxChtSaKY50pOVUl1GMG1f2TTZ5KeZTr30dypLq_SCykwRJly_cTzdZjsTh7f4g4rHfk0UTJTH89XFvtiunizpWU/s1600/06162011sim_get.jpg" height="70"/>
<span class="rp_title">Simple Plan [Rock]</span>
<span class="rp_links"> <a target="_blank" href="http://natamp3.blogspot.com/2011/06/simple-plan-get-your-heart-on.html">Article</a>
<a class='a2a_dd' href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fnatamp3.blogspot.com%2F&title=Natamp3&description=">Share</a>
</span></div></li>
</ul>
<span id="rp_shuffle" class="rp_shuffle"></span></div>
-----------------------------------------------------------------------
Do not post less than five minimum of 5
-----------------------------------------------------------------------
All related posts are going to be listed in our structure. In the JavaScript we will define that we only show 5 posts at a time. Of course, you need to replace the # with your links.
The shuffle span will be positioned after the list.
Let’s take a look at the style.
The CSS Add before tag ]]></b:skin> :
<style type='text/css'>
.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:220px;
margin:0;
padding:0;
}
span.rp_shuffle{
background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguG5tfGttmUcs1kz4POci0ya8Weuk1rLCpnWPNykWd26J1Bp8HqWPP1kRN4IuqksI6GyvrVE3vBW9c01negp_vz1_UNlMRtpP-O17iZKQtlI2JM4nS2aujLrsCKOU9TTrwghSo_BxaQ6U/s800/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul{
margin:0;
padding:0;
list-style:none;
}
.rp_list ul li{
width: 240px;
margin-bottom:5px;
display:none;
}
.rp_list ul li div{
display: block;
line-height:15px;
width: 240px;
height: 80px;
background:#333;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul li div img{
width:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}
span.rp_title{
font-size:11px;
color:#ddd;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:3px;
background:#222;
-moz-box-shadow:0px 0px 5px #000 inset;
-webkit-box-shadow:0px 0px 5px #000 inset;
box-shadow:0px 0px 5px #000 inset;
}
span.rp_links{
width:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2v_AQsMg5vwgQ87td36_6jUnrIy4gPTdmiKvV_ak6nxAhyphenhyphentwGJaqrJh6IxMF0xyfs9p7GJt98FnoNK0NfdqvoISmEfj268LUdGsssdd34SlQC9KTcBBi5rrwLrEEdLHh22EyONAhFaas/s800/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
text-shadow: 0 -1px 1px #222;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
}
</style>
And that’s all the style. Let’s add some magic!
The JavaScript
The main idea is to first show 5 items with their whole width and to quickly slide them in until one can only see the thumbnail. That should happen when we load the page. It is a neat effect to show the user that there is something going on and that he can interact with this element.
When we hover over an item, we will make it slide out until its full width, revealing the title and the links.
The shuffle function will make 5 posts appear randomly. As you noticed, we added all our related posts to the HTML structure and from those items, we will randomly choose 5. This method does not guarantee us that the next set of items shown are not repeated, but it’s a simple solution.
We will add the following jQuery function:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;
/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);
function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}
/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});
/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);
function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
//]]>
</script>
And that’s all!
We hope you enjoyed this tutorial and found it useful! widget by nata http://natamp3.blogspot.com
0 komentar:
Posting Komentar