Modifikasi Older Posts dan Newer Posts, Yang Ini Beda!

Older Posts dan Newer Posts

Untuk Modifikasi Older Posts dan Newer Posts kali ini efeknya mirip-mirip tutorial Recommended Post Slide out for Blogger dari http://www.bloggerplugins.org.

Cara Membuat:

1. Login ke Akun blogger

2. Klik Template

3. Klik Edit HTML

4. Klik Proceed

5. Cari taq <b:include name='nextprev'/>, kalau sudah dapat ganti dengan kode dibawah ini,

<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='blog-pager-box'>
<h4>Other posts published:</h4>
<b:include name='nextprev'/>
</div>
</b:if>
6. Letakkan kode dibawah ini diatas </head>

<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-box').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYgyyJNdpdcgSGZHJqjpBDpnPtIgrDgSbqNQ8uTnMhOqQxNr5n7gE40ru7XE6pKNaW1m1TBaChCyEyb2xti7ySMJI5yHnToqNC5-vMTIEOR2ZLJFyyBY6Nt6efaa0EHvr0FUg27bHOh90w/s1600/paper.jpg)'
});

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('#blog-pager-box').fadeIn();
} else {
$('#blog-pager-box').fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>
Newer Posts:</div>
" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>
Older Posts:</div>
" + olderLinkTitle);
});
});
// ]]>
</script>

#blog-pager-box h4 {
margin:0;
padding:0;
color:#4898B9; /* Widget's title color */
font-size:16px; /* Title font size */
}

#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color: #4B4B4B !important; /* Color of the links */
float: left;
width: 500px;
clear:both;
}

a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
 
a.blog-pager-newer-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sSUJVTM6IFTdU9Y42ZBDGl3ho70scxY4PtC_x1LJPmV8-cKXxWXo0VnlUTRxyekSB1E2mi1kyY-TbjQlmTbxKiLzTYinY7Bl3ZaH2sJzBiD0zBc3Tn15l0LOLJyrIFhhoJrTa5Ul_j4/s1600/back.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4G4dF82Dryre2TGdkb3i3G5eGZET3SWzgMG2uW591QXIUhyphenhyphenojRiuUrTkX82jVcGmJp6B031EbiGRFg5mT6y81gqtOauTV5srE2n4u_lEsbVxPshEAUsHjee1hMrndXA4c41q9mY3aTLc/s1600/forward.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
 
#blog-pager div {
color:#0577AB; /* Color for the "Newer Posts" and "Older Posts" text */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#4898B9; /* Color for the "Newer Posts" and "Older Posts" text */
}
-->
</style>
</b:if>

DEMO

Sumber:
http://helplogger.blogspot.com/2013/05/fading-box-with-newerolder-posts-links.html

+ Create Comment + 2 Responses so far.

Anonim

4 September 2013 pukul 17.29

saya lihat dulu deh demonya.
Makasih master. ^_^

Rohis Facebook

4 September 2013 pukul 17.34

@kolongtulismf nama sy bukan master..!

Posting Komentar

Terima Kasih banyak atas saran dan kritiknya.

Sama seperti peraturan yang dibuat oleh para blogger pada umumnya.., cuma disini saya harapkan agar para pengunjung untuk lebih fokus pada artikel kami yang bertemakan Agama (Islam), khususnya untuk saudara-saudari kami yang Muslim dan Muslimah.

0. Yang OOT silahkan masuk ke menu Buku Tamu/Blogwalking!
1. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
2. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
3. Harus Sopan
4. Admin tidak meladeni Debat kusir
5. Bercanda gk boleh ada unsur pornonya dan unsur Bohongnya
6. Silahkan melampirkan link Mati, gk boleh link hidup

Rohis Facebook