(Iklan)
Breaking News
Loading...
Thursday 15 August 2013

Cara Menambahkan Navigasi Box dengan Posting Lebih Baru & Lama di Blogger

21:43

Microsoft Share  | Cara Menambahkan Navigasi Box dengan Posting Lebih Baru & Lama di Blogger | Berikut adalah Cara untuk Menambah Navigasi Box dengan Posting Lebih Baru & Lama di Blogger, lansung saja kita simak tips di bawah :

Langkah 1. Dari Dashboard Blogger Anda, pergi ke Template> Edit HTML, klik di mana saja di dalam kode area dan mencari - 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 "posting lain diterbitkan" judul dengan Anda sendiri

Langkah 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'). Beralih ()
    
Css ({.
    
width: '520px ',
    
height: '150px ',
    
Posisi: 'tetap',
    
padding: '1 em ',
    
bottom: 0,
    
kanan: 0,
    
background: 'url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSQFhn_NDJjw_tjVyMw_t21IfJdg84V2u17SiYz2Eg7GKsjV53DqtBk6cissw9Dhs9CE1lRhKfblIcUu3QYD6L11OKWNLL2Xl4noK47BSjHOVSbY9VZLXQ5_6Ie8tDh7bTtSANKhQJpyQ/s1600/paper.jpg)'
    
});

    
$ (Window). Gulir (function () {
    
if ($ (ini) scrollTop ()> 100.) {
    
$ FadeIn (('# blog-pager-box')).;
    
} Else {
    
$ ('# Blog-pager-box') fadeOut ().;
    
}
    
});
    
});
    
$ (Document). Ready (function () {
    
var newerLink = $ ("a.blog-pager-baru-link") attr ("href").;
    
$ ("A.blog-pager-baru-link") beban (newerLink + "post-title:. Pertama"., Function () {
    
var newerLinkTitle = $ ("a.blog-pager-baru-link: pertama"). teks ();
    
. $ (". Blog-pager-baru-link") html ("<div> Posting Lebih Baru: </ 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") teks ();.
    
. $ (". 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; / * Warna judul Widgets * /
    
font-size: 16px; / * Judul ukuran font * /
    
}

    
# Blog-pager-baru-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-baru-link {..
    
background-color: transparent penting;
    
background-image: none penting;
    
border: 0 penting;
    
Warna: # 4B4B4B penting, / * Warna sponsor * /
    
float: left;
    
width: 500px;
    
clear: both;
    
}

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

    
a.blog-pager-baru-link: sebelum {
    
isi: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4ps0XKCHC_6EHT6qzQ4j-AuwT0mioJYlqm3MUJdCShsMJceQb99xfZlJTaSAksgwg07Uq-ECIvTYhmQvzk5T7reiKwYyeqqWwZ6JK7FKuqolhZx_-egfrcnlphr-iD9w_leEG-ZHFRs/s1600/back.png);
    
float: left;
    
}
    
a.blog-pager-older-link: sebelum {
    
isi: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijsbfF3fIxKqiuqfwtR7QLYuzBj1WT1gyFg4eXAa257V40kfPvhXQ5PJ-58m5G3pNblfKt971auHbig9_b-EL9vb3-UF_sb_-auXUNG2Wj_daw2B6g2uW_Xk4nwvhdPvJ0GMQF0xoD8Xc/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;
    
}
    
a # blog-pager div: 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 memiliki hanya 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.

(iklan)

0 comments:

Post a Comment

 
Toggle Footer