1) Place standard repeater to your page and configure it to display first 5 items
2) Create a new source page, place the
Dynamic viewer source web part on it and let it render all of your news
3a) Place the
Dynamic viewer web part below your repeater, link it with the source page and configure the
Load size to 5 and the
Start index to 1 to skip those already listed 5 items
3b) If you want to load it just by one item, please set the
Load size to 1 and
Start index to 5 instead
4) If you want to style the “Load more” button, you can take advantage of following style:
.DVLoadMore,.DVNoMoreRecords {
margin: 0px auto;
display: block;
text-align: center;
clear: both;
}
.DVLoadMore {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#ededed;
-webkit-border-top-left-radius:8px;
-moz-border-radius-topleft:8px;
border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topright:8px;
border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
-moz-border-radius-bottomright:8px;
border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-bottomleft:8px;
border-bottom-left-radius:8px;
text-indent:-1.15px;
border:1px solid #dcdcdc;
color:#777777;
font-family:Arial;
font-size:14px;
font-weight:bold;
font-style:normal;
height:32px;
line-height:32px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.DVLoadMore:hover {
background-color:#dfdfdf;
}.DVLoadMore:active {
position:relative;
top:1px;
}