Selamat Datang di Blog Karrysta buat Sobat semua
Kunjungan Anda ini sangat bermanfaat sekali untuk kelangsungan dan ke lestarian Blog Karrysta,
Semoga apa yang saya Bagikan di sini senantiasa bisa bermanfaat dan memberikan motivasi dan apresiasi untuk kita semua
Mudah-mudahan silaturrahmi dan Ukhuwah antar blogging semakin erat untuk tetap saling berbagi Terima kasih .. Salam hormat.

Merubah Next Prev Blog Dengan Judul Artikel

Merubah Next Prev Blog Dengan Judul Artikel


Untuk membuat tampilan blog lebih lengkap dan dinamis,  terkadang seorang blogging harus
Berupaya bagaimana tampilan halaman blognya terlihat rapi juga lengkap di lihat pengunjung
Seperti pada kesempatan kali ini  saya akan berbagi tutorial  seperti pada judul,  artikel di atas
Sebelumnya sudah saya share tentang, Membuat Random Posts Style Polos, pada postingan
Yang saya bagikan kali juga  sedikit akan merubah, pada next dan prev   pada blogger dimana
Dengan tampilan default nya  hanya biasa saja  maka dengan widget ini  akan sedikit di rubah

Merubah Next Prev Blog Dengan Judul Artikel
Merubah Next Prev Blog Dengan Judul Artikel

Buka halaman berikut untuk melihat demonya :   DEMO

Pungsi next  prev ini  kebanyakan  terdapat  pada  bagian  paling  bawah  postingan  blog kita
Dimana pungsi tersebut untuk memudahkan  pengunjung untuk melihat  artikel sesudahnya
Dan juga artikel sebelumnya dan untuk lebih memudahkan visitor next prev tersebut, akan di
Rubah menjadi teks link  dengan judul artikel  buat sobat yang  berminat  simak di bawah ini

Cara memasangnya :

Pertama anda masuk account blog anda lalu sign in, terus pilih dasboard lalu pilih template
Kemudian pilih edite template,  selanjutnya cari kode  </head>  atau jika template blog anda
Memakai kode  </style>,  copy kode, di bawah ini   dan pastekan tepat  diatas kode,  </head>
Atau paste  kode di bawah,  tepat di atas kode,  </style>, pada element,  template  blog anda

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

Jika di blog anda sudah terdapat code jquery jangan di pasang code diatas
Atau hapus code jquery  yang di template  dengan yang ini, versi terbarunya

Tambahan code :

Masih di edit Html jika anda ingin mengganti icon Home di bawah postingan
Cari code  <data:homeMsg/>  code tersebut ada 2,  pilih yang  terdapat pada
Bagian pungsi   next - prev  atau pada  bagian code   <data:newerPageTitle/>
Atau code  <data:olderPageTitle/>,  code  <data:homeMsg/>  ini yang di ganti
Dengan script Url icon Home  pada bagian  template blog kesayangan anda

<img src='http://2.bp.blogspot.com/-k5930WzXlDo/UoFhdukmJGI/AAAAAAAAD2Y/1TdBn5OimSY/s1600/Home+Karrysta.jpg' title='Halaman Beranda'/>

Setelah memasang kode diatas, dengan benar kemudian save template, dan selanjutnya
Berlanjut ke tahap,  selanjutnya memasang  kode Html javascript,  pilih dasboard blogger  
Pilih layout  atau  tata letak,  lalu pilih add widget,  selanjutnya copy  kode di  bawah ini dan  
Pastekan pada  kolom Html,  pada add widget   yang anda  buat tadi,  jangan,  di compose

<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 + " >>");//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("<< " + newerLinkTitle);
});
});
</script>

Save - simpan widget dan lihat hasilnya

Kode javascript diatas bisa di pasang pada widet lain yang sudah ada atau dengan cara
Buat add widget baru,  bisa di mana saja penempata nya,  tapi lebih tepat di bawah foter

Jika membuat add widget baru jangan lupa hapus kode, dibawah ini untuk menghilangkan
Error Html 5,  pada template  anda, cari kode nya  di bawah ini,  kemudian hapus,  kode nya
Kode tersebut,  terdapat pada  template anda,  cari kodenya  di bagian,  edite  template blog

<b:include name='quickedit'/>


Kesimpulan :

Scripts diatas jika diterapkan sesuai dengan petunjuk  tutorial ini maka  next prev yang terdapat
Pada bagian paling bawah postingan blog anda.  Maka akan berubah  menjadi link judul artikel
Sekian artikel saya pada kali  ini, semoga bisa bermanfaat buat sobat semua "Happy blogging"

Berlangganan lewat email pada post baru Blog : Karrysta.

Next
« Prev Post
Previous
Next Post »

32 komentar

dengan cara ini bisa memaksimalkan link yang tak terpakai dengan sempurna ya kang :)
sehingga terlihat menarik untuk mengurangi bounce rate :)

Tepat seratus untuk Mas Intan,.
Mantep Mas Super aktip yah Mas? pagi-pagi sudah on blog.

saya sih nyimak dulu mas...susah kalau dipraktekin dari hp
izin save dulu ya

dapat ilmu baru lagi nich...baru tahu saya kalo next dan prev bisa diganti dengan judul artikel.... :-)

ingin sekali ngeditnya tpi koneksi internet saya lemot...jadi, nyimak saja :D

http://jagadkawula.blogspot.com/

saya juga baru tahu bang :D

keren nich infonya mas,,, segera saya praktekkan di blog, hehehe :)
makasih telah berbagi ^_^

Sialhkan Mas semoga arikel seadanya ini bisa bermanfaat
Terima kasih atas kunjungan nya Sobat semua.

Silahkan di simak Mbak Jenx dan save script nya Mbak
semoga bermanfaat buat Mbak Jenx

Silahkan Mas Hari, Kang Zeer sama koneksi internet akhir-akhir
Ini sangat banyak gangguanya kirain saya doang Tuh Kang?

Silahkan Mbak Indri semoga bermanfaat untuk kebaikan artikel ini
Terima kasih buat sobat semua, atas kunjunganya.

aku nyimak dulu sahabat, belum saatnya saya edit template hehe nunggu akhir pekan.

mas saud emang jawaranya deh kalo yang urusan kayak gini....hehhee

btw....fotonya siapa mas :)

bagus tuh kang style CSSnya di tambah lagi biar lebih sipp, ntar taruhnya di atas post body biar lebih pas.. hehe

Sekalian nonton midnight dong... :)

Sama sama,mbak indri ;)

Script nya saya simpan dulu kang.kapan2 bisa di coba.haturnuhun!

setakat ini saya masih selesa dengan yang sedia ada.. mungkin satu masa nanti saya akan menambahnya berpandukan tutorial ini..

Kunjungan dini hari mas karryst, saya tunggu posting barunya, hehehe ^_^

dibawahnya ding :)

keren juga ya, hanya mengandalkan CSS sama jquery. mantap deh dan penuh kreatif...

Wah tutorialnya layak buat dicoba nie mas, saya bookmark dulu ya tar kalo dah sengggang waktunya saya coba mempraktekannya...thanks udah berbagi ilmunya :)

Terima kasih buat Sobat semua, atas pendapat dan Masukanya
Motivasi Anda semua, sangat berharga buat saya, salam sukses.

wah baru tau saya kalo tulisan next bsa d rubah dgn judul artikel

Silahkan Mas Asgar, semoga bermanfaat

Balik lagi nih mas,sekalian follow blog nya

asyik juga ya kalau tulisan previous atau next di bawah posting bisa di ubah ke bentuk tulisan. Jadi pengunjung bisa tahu ya mas :)
Luar biasa tutorialnya. Harus dicoba nich :)

wuidiih...keren banget nih...langsung prkatekin tutorial ng'ganti previuw dengan judul nya deh ih...di blog yang baru sayah...makasih ilmunya ya gantengku

wah mantap dan bagus sobat setelah saya lihat demonya,
minta ijin untuk save dulu sobat, mungkin suatu saat diperlukan
terima kasih atas tutorilanya

Iya benar sekali saya setuju ini perlu dicoba dulu

wah keren juga yah mas Karysta, jadi pengunjung bisa langsung diarahkan ke artikel lainnya, sip deh :)

ini juga merupakan hal baru buat saya, memang perlu dicoba yah mbak :)

Keren pisan kalau di pasang di blog sayah, pasti makin dinamis, praktis dan tiis..

Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini

Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower

Terima Kasih atas Kunjungan dan Komentar nya
Copyright © 2015. Karrysta - All Rights Reserved | Template Created by Kompi Ajaib | Modified : Saud Karrysta | Proudly powered by Blogger