Memudar Box Dengan Baru / Posting Lama Link Dan Judul Untuk Blogger

Link navigasi adalah mereka yang muncul di bagian bawah halaman yang mengatakan "Posting Lama", "Posting Lebih Baru" dan "Home" dan membantu kita untuk bergerak melalui posting blog. Tutorial ini akan menunjukkan cara untuk mengubah kata "Posting Lama" dan "Posting Lebih Baru" untuk judul posting dan membuat ini muncul dalam kotak "memudar" ketika Anda gulir ke bawah halaman. 

Anda dapat melihatnya dalam tindakan ini demo blog - ketika Anda gulir ke bawah, link navigasi akan muncul menampilkan judul posting untuk yang lebih tua / entri baru. 

Dengan cara ini untuk menampilkan link navigasi akan terlihat hanya dalam entri individual, sedangkan padahomepage dan bagian lain dari blog tersebut akan tetap ditampilkan seperti biasa. 

BAGAIMANA TAMBAHKAN NAVIGATION BOX DENGAN BARU & POSTING LAMA DI BLOGGER

. Langkah 1 Dari Dashboard Blogger Anda, pergi ke Template> Edit HTML, klik di mana saja di dalam kodearea dan pencarian - menggunakan CTRL + F - untuk baris ini: 

 <b:include name='nextprev'/>

Screenshot: 

. Langkah 2 REPLACE kode di atas dengan yang satu 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> posting lain diterbitkan: </ h4>
<b:include name='nextprev'/>
</ Div>
</ B: if>

Catatan: Anda dapat mengubah "tulisan lain yang diterbitkan" title dengan Anda sendiri 

. Step 3 Sekarang tambahkan tepat di atas </ head> kode berikut: 

 <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 ',
Posisi: 'fixed',
padding: '1 em ',
bottom: 0,
kanan: 0,
background: 'url (http://4.bp.blogspot.com/-2qUvFgMRqk4/UaD7GSA7C8I/AAAAAAAADbI/eh-qGOnAmeM/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") beban (newerLink + "post-title:. Pertama", function () {
. var newerLinkTitle = $ ("a.blog-pager-newer-link: pertama") text ();
. $ (". Blog-pager-newer-link") html ("<div> Baru Posts: </ div>" + newerLinkTitle);
});
var olderLink = $ ("a.blog-pager-older-link") attr ("href").;
. $ ("A.blog-pager-older-link") beban (olderLink + ". Post-title: pertama", function () {
. var olderLinkTitle = $ ("a.blog-pager-older-link") text ();
. $ (". Blog-pager-older-link") html ("<div> Posting Lama: </ div>" + olderLinkTitle);
});
});
/ /]]>
</ Script>

<style type='text/css'>
<! -
# Blog-pager-box {
box-shadow: 0 0 3px # AEAEAE;
z-index: 9;
}

# Blog-pager-box h4 {
margin: 0;
padding: 0;
color: # 4898B9; / * Widget ini warna judul * /
font-size: 16px; / * ukuran huruf Judul * /
}

# Blog-pager-newer-link {float: left; jelas: keduanya; line-height: 30px;}
# Blog-pager-older-link {float: left; jelas: keduanya; line-height: 30px;}
. Rumah-link {display: none;}
. Blog-pager-older-link,. Blog-pager-newer-link {
background-color: transparent penting;
background-image: none penting;
border: 0 penting;!
color: # 4B4B4B penting; / * Warna link * /
float: left;
width: 500px;
clear: both;
}

a.blog-pager-older-link: hover, a.blog-pager-newer-link: hover {
text-decoration: none penting;
}

a.blog-pager-newer-link: sebelum {
isi: url (http://1.bp.blogspot.com/-2hKXB7FANlI/UaD_wh_InyI/AAAAAAAADbs/S0H4hok2te0/s1600/back.png);
float: left;
}
a.blog-pager-older-link: sebelum {
isi: url (http://4.bp.blogspot.com/-VPxzgLQCgrM/UaD_tGXPfnI/AAAAAAAADbk/owLQci4BaYY/s1600/forward.png);
float: left;
}
# Blog-pager {
width: 500px;
background-color: transparent penting;
background-image: none penting;
border: 0 penting;!
text-align: left;
}

# Blog-pager div {
color: # 0577AB; / * Warna untuk "Posting Lebih Baru" dan "Posting Lama" text * /
font-weight: bold;
margin-bottom: 5px-;
}
div # blog-pager: hover {
text-decoration: none penting;
color: # 4898B9; / * Warna untuk "Posting Lebih Baru" dan "Posting Lama" text * /
}
->
</ Style>
</ B: if>

Perhatikan bahwa gadget ini menggunakan jQuery, jadi cobalah untuk hanya memiliki satu versi. 

Kustomisasi:

- Ada tiga URL dengan warna biru, yang pertama adalah gambar latar belakang kertas untuk kotak, dua lainnya adalah ikon yang sesuai dengan anak panah. Anda dapat mengganti ini dengan Anda sendiri. 
- Dalam hijau Anda dapat melihat di mana untuk mengubah warna teks. 
- Jumlah merah adalah jarak dalam pixel yang mengaktifkan gadget, ini berarti bahwa kotak akan muncul ketika Anda gulir ke bawah 100px tersebut. Anda dapat menggunakan nilai yang lebih tinggi jika posting Anda biasanya panjang dan oleh karena itu "tinggi" dari gulungan lebih besar. 

Langkah 4. Sekarang, Simpan Template dan hanya itu! 

Anda juga dapat mengubah "Posting Lama" dan "Posting Lebih Baru" link dengan posting judul atau gambar .