Cara Membuat Navigasi Halaman Angka Pada Blogger atau Blogspot

Samipodo blog kali ini akan memberi tutorial tentang bagaimana caranya membuat navigasi halaman angka di blog kita. Tujuannya agar blog kita tidak kelihatan berantakan karena banyaknya posting yang kita buat. Biasanya hal seperti itu sering terjadi kalau kita menggunakan template minimal dengan 2 kolom, cara mengatasi kita harus membuat navigasi pada halaman berupa angka pada setiap halaman. Sebenarnya navigasi halaman ini bisa juga disebut tombol nextt yang akan menampilkan nomor pada setiap halaman, jika kita klik nomor 2 akan pindah pada nomor 2 dan seterusnya, contohnya seperti ini nih, saya pinjam punya google !

Terus cara bikin nya begini, kamu cukup pasang kode dibawah ini di sidebar:

1. Masuk ke Dasboard Blogger kamu.
2. Klik layout(Tata Letak)
3. Klik Tambah Gadget.
4. Pilihlah Edit HTML/Javascript.
5. Masukkan kode html di bawah ini:

<style>

.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;

}

.showpageArea a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;

}

.showpageArea a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

.showpageNum a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;

}

.showpageNum a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

.showpagePoint {font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

font-weight: bold;

border: 1px solid #333;

color: #fff;

background-color: #000000;

}

.showpage a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

.showpageNum a:link,.showpage a:link {

font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

text-decoration: none;

border: 1px solid #0066cc;

color: #0066cc;

background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}

</style>

<script type="text/javascript">

function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';

var pageCount=5;

var displayPageNum=4;

var firstPageWord = 'First';

var endPageWord = 'Last';

var upPageWord ='Previous';

var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

}

}//end if(post.category){

itemCount++;

}

}else{

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

itemCount++;

}

}

for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}

}else{

upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}

fFlag++;

}

if(p==(thisNum-1)){

html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';

}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

html += '<span class="showpageNum"><a href="/">1</a></span>';

}

}else{

html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';

}

}

if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){

if(!isLablePage){

html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}else{

html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';

}

}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Halaman '+thisNum+' dari '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){

html += downPageHtml;

html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';

}

if(postNum==1) postNum++;

html += '</div>';

if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){

html ='';

}

for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}

if(pageArea&&pageArea.length>0){

html ='';

}

if(blogPager){

blogPager.innerHTML = html;

}

}

}

</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Setelah memasukkan kode tadi, geser dengan menekan mouse letakkan dibawah widget postingan kamu. nih lihat contohnya : sebelumnya saya menambah widget di atas sidebar lalu saya geser kebawah postingan.

Silahkan di coba, Gan!

More about → Cara Membuat Navigasi Halaman Angka Pada Blogger atau Blogspot

Cara Merubah Judul Blog dengan Judul Postingan

Fungsi dan manfaat mengganti judul blog dengan judul postingan, menurut para blogger yang sudah banyak melakukan eksperimen bisa membuat blog lebih search engine friendly ( lebih bersahabat dengan search engine ) sehingga bisa membuat blog menempati top rank hasil pencarian termasuk memperoleh posisi bagus di search engine.

Setelah anda menempatkan secript mengganti judul blog dengan judul postingan akan berubah seperti ini :

Sebelum Judul Blog di ganti :
Kursus buat blog – Cara membuat readmore otomatis

Setelah Judul Blog di ganti :
Cara membuat readmore otomatis - Kursus buat blog

Jadi posisinya terbalik, hal itu bisa di lihat setelah mengklik judul dri salah satu postingan.

Di bawah ini kode yang harus anda masukkan.

1. Masuk ke Layout lalu Edit HTML
2. Cari kode ini
<title><data:blog.title/></title>
(Terletak di bagian atas )

3. Kemudian ganti dengan kode ini
<b:if cond='data:blog.pageType == "index"'><; <title><data:blog.title/></title><; <b:else/><; <title><data:blog.pageName/></title><; </b:if>
4. Simpan

Pada halaman Utama Blog tetap merupakan judul Blog yang akan tampil kecuali jika salah satu dari postingan di klik judul blog akan berubah judul postingan

More about → Cara Merubah Judul Blog dengan Judul Postingan