JASA PEMBUATAN WEBSITE: CARA MENGGANTI NEXT & PREVIOUS PAGE DENGAN JUDUL POSTINGAN

Bagaimana, apakah anda tertarik dengan tutorial kali ini ? Kalo tertarik mari kita menuju ke topik pembahasan. Ikuti secara teliti ya !

Cara 1

Untuk kali ini saya akan berbagi cara Mengganti Next-Prev Navigasi Dengan Judul Post.

Navigasi next-prev yang menggunakan judul post cukup memancing para pembaca dan pengunjung blog untuk melihat artikel sebelum dan sesudah dari post yang sedang dibaca, karena yang tampil adalah judul artikelnya. Trik ini belum terbukti dapat mengoptimalkan seo, namun secara logika trik ini cukup berhubungan dengan seo karena jika kita ganti next-previous dengan judul post sesudah dan sebelumnya, mungkin ada pengunjung yang tertarik untuk membaca dan mengklik judul tersebut, otomatis jumlah pageviews akan bertambah.

Berikut cara Mengganti Next-Prev Navigasi Dengan Judul Post :

Login ke blogger, pilih Rancangan/Design, kemudian pilih Edit HTML, lalu beri centang expand template widget.
Tips : Biasakan membackup / mendownload template anda terlebih dulu sebelum meng-edit template.
Cari kode berikut ini dibawah kode ]]></b:skin>

</script>

Ket : Jika belum ada Copy kode tersebut dan paste dibawah kode ]]></b:skin>

Save template Anda
Selanjutnya pilih Elemen Laman / Page Element, klik Tambah Gadget / Add a Gadget dan pilih HTML/Javascript, lalu letakan kode dibawah ini pada area konten widget.

#blog-pager-newer-link {width:200px;text-align:left;}

#blog-pager-older-link {width:200px;text-align:right;}

</style>

$(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").text();

$("a.blog-pager-newer-link").text("<< " + 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();

$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt

});

</script>

Klik Save dan lihat navigasi pager blog Sobat.

Sekian trik untuk Mengganti Next-Prev Navigasi Dengan Judul Post.
Atau Alternati jika ukuran Tulisan berubah

Menambahkan Kode di Widget HTML/JavaScript

Tambahkan kode ini pada widget HTML/JavaScript

<style type="text/css">
.home-link{display:none}
#blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;font-family:Arial, sans-serif;}
#blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Arial, sans-serif;}
</style>
<script type="text/javascript">
$(document).ready(function(){
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();
$("a.blog-pager-older-link").text(olderLinkTitle + "\u2192");//rgt
});
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();
$("a.blog-pager-newer-link").text("\u2190" + newerLinkTitle);
});
});
</script>

Kostumisasi

Untuk kostumisasi atau penyesuaian dengan blog Anda, silahkan edit beberapa kode di atas, diantaranya :

font-size:12px (untuk merubah ukuran huruf, ganti 12px sesuai keinginan)
width:200px (lebar dari judul yang ditampilkan, ganti 200px sesuai keinginan)
font-family:Arial, sans-serif (ganti sesuka anda, misal Georgia, Trebuchet MS, Verdana, dll)

Setelah selesai, silahkan lihat di bawah kolom komentar. Sudah berubah?

Cara 2

#1 Menemukan dan mengganti kode blog-pager

Seperti biasa -_- , masuk ke akun blogger anda.
Masuk ke bagian template dan klik edit HTML.
Cari kode <div class='blog-pager' id='blog-pager'> dengan menggunakan fungsi CTRL+F

Kode selengkapnya seperti ini :

<div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« <data:newerPageTitle/></a>

</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/> »</a>

</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

Ganti dengan kode dibawah ini :

<div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'>

<div class='mobile-link-button' id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:alt='data:newerPageTitle' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'/>

</div>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='arrow' src='http://i1335.photobucket.com/albums/w677/yoyosuharyo/arrow_zps37c931f2.png'/>

</a>

</b:if>

</b:if>

<b:if cond='data:olderPageUrl'>

<div class='mobile-link-button' id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:alt='data:olderPageTitle' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'/>

</div>

</b:if>

Keterangan :
- Kode berlatar kuning adalah kode next post.
- Kode berlatar hijau adalah kode previous post.
- Kode berlatar biru muda adalah kode homepage.
- Kode berwarna pink adalah kode gambar. Anda dapat mengeditnya dengan menambahkan icon home mungkin atau apapun itu.

Sebelum memasangnya, saya kasih tahu dulu, kode blog-pager di blog ada dua. Yang satu pada atasnya bertuliskan <b:includable id='nextprev'> sedangkan yang satunya lagi <b:includable id='mobile-nextprev'>. Menurut saya sih bedanya pada tampilan perangkat. Itu sih logika saya. Untuk mengganti next & previous page dengan judul postingan, anda disarankan untuk memasang dulu page navigation number pada blog agar hasilnya tidak muncul di homepage. Anda juga dapat memperindah page navigation number tersebut dengan membaca postingan DISINI.

#2 Pemasangan script

Simpan script dibawah ini tepat diatas kode </body>

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

//<![CDATA[

function getTitlesForNav(e){for(var t=0;t<e.feed.entry.length;t++){var n=e.feed.entry[t];var r="";for(var i=0;i<n.link.length;i++){if(n.link[i].rel=="alternate"){r=n.link[i].href;break}}if(r!="")urlToNavTitle[r]=n.title.$t}}function urlToPseudoTitle(e){var t=e.match(/\/([^\/_]+)(_.*)?\.html/);if(t){t=t[1].replace(/-/g," ");t=t[0].toUpperCase()+t.slice(1);if(t.length>28)t=t.replace(/ [^ ]+$/,"...")}return t}var urlToNavTitle={};document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+"script>");$(window).load(function(){window.setTimeout(function(){var e=$("a.blog-pager-newer-link").attr("href");if(e){e=e.replace(/\.blogspot\.[^/]+\//,".blogspot.com/");var t=urlToNavTitle[e];if(!t)t=urlToPseudoTitle(e);if(t)$("a.blog-pager-newer-link").html(t)}e=$("a.blog-pager-older-link").attr("href");if(e){e=e.replace(/\.blogspot\.[^/]+\//,".blogspot.com/");var t=urlToNavTitle[e];if(!t)t=urlToPseudoTitle(e);if(t)$("a.blog-pager-older-link").html(t)}},500)})

//]]>

</script></b:if>

Note : Script ini akan berfungsi jika template anda memiliki kode jquery. Baca lebih lanjut DISINI. atau anda bisa memasang yang saya pake sekarang pada blog ini : (simpan di atas kode <body> )

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' type='text/javascript'/>

JASA PEMBUATAN WEBSITE

Laman

CARA MENGGANTI NEXT & PREVIOUS PAGE DENGAN JUDUL POSTINGAN

Menambahkan Kode di Widget HTML/JavaScript

Kostumisasi

#1 Menemukan dan mengganti kode blog-pager

#2 Pemasangan script

No comments:

Post a Comment

Total Pageviews