Cara Membuat Halaman Navigasi Blog SEO dengan Angka (Terbukti 100% Mempercepat Loading blog SL)

CARA MUDAH MEMBUAT NAVIGASI HALAMAN DENGAN ANGKA

Sobat blog SL. Tentu tidak asing lagi bagi para pengguna blog atau website, ketika melihat tampilan dinamis dan elegan, friendly tentunya. Elegan yang saya maksud tentu sangat menarik dan mempunyai wibawa, sedangkan dinamis dan friendly artinya sangat memberikan kemudahan kepada user/pengguna/pembaca blog kita. Sesuai dengan topik bahasan kita kali ini, blog SL akan memberikan tips dalam membuat cepat loading blog. Hal ini sudah saya uji coba dan saya praktekkan sendiri. Penasaran? 

Sobat. Perlu kita fahami bersama. Bahwa kewajiban kita selaku admin yang baik tentu ingin memuaskan user. Dalam aspek ini, tips ini merupakan SALAH SATU CARA membuat blog yang berkualitas dari segi friendly, elegan, dinamis dan fast loading (sesuai pengalaman blog SL).

Sebegitu pentingkah membuat navigasi menu halaman?
Sobat. Navigasi menu halaman ternyata mempunyai peranan yang sangat penting dan menjadi salah satu karakter blog yang berkualitas. Karena itu, blog SL berupaya memberikan tips kepada rekan-rekan semua. Nih penampakannya kecepatan loading blog SL!

TIPS INI MEMPERCEPAT LOADING BLOG SL
Percaya atau tidak, pada kenyataannya setelah blog SL melakuka pengujian menggunakan tools pengukur kecepatan loading blog GTmetrik, hasilnya sangat mencengangkan!!. Sebelum menerapkan tips ini, kecepatan loading blog SL hanya berkategori "B". Namun setelah menerapkan tips ini kecepatan loading blog SL menjadi kategori "A". Woow. Siapa mau coba, ^-^. Langsung saja Sobat simak langkah-lngkahnya dengan teliti!!

CARA MEMBUAT NAVIGASI HALAMAN DENGAN ANGKA
Seperti biasa, pertama-tama baca Bismillah dan berdo'a. Selanjutnya:
1. Masuk akun blogger
2. Klik template > Edit HTML
3. Cari kode berikut ini <b:includable id='mobile-index-post' var='post'> lalu Copy paste kode berikut di bawahnya:

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

***. Note: Warna biru menunjukkan jumlah keluaran posting yang tertampil. Ganti warna biru sesuai dengan selera Sobat. 

4. Cari kode berikut <b:include name='nextprev'/> kemudian ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'><b:include name='page-navi'/><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><b:include name='page-navi'/></b:if><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><b:include name='nextprev'/></b:if></b:if>

5. Cari kode berikut   ]]></b:skin>  kemudian copy paste kode di bawah ini di atasnya:

#blog-pager, .pagenavi {     clear: both;     text-align: center;     margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {text-decoration: none;color: #333;text-shadow: 0 1px 0 rgba(255, 255, 255, .5);background-color: #F8F8F8;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);padding: 5px 10px;border: 1px solid lightGrey;font-weight: bold;font-size: 12px;vertical-align: middle;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;margin: 2px 2px;-webkit-transition: .0s ease-in!important;-moz-transition: .0s ease-in!important;-ms-transition: .0s ease-in!important;-o-transition: .0s ease-in!important;transition: .0s ease-in!important;}#blog-pager a:hover, .pagenavi a:hover {border-color: #C6C6C6;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);}#blog-pager-older-link, #blog-pager-newer-link {     float: none;}.pagenavi .current {border-color: #C6C6C6;background-color: #E9E9E9;background-image: none;-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);}.pagenavi a:active {border-color: #C6C6C6;background-color: #E9E9E9;background-image: none;-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);}

6. Save Template

Note:
Jika ingin menggunakan tipe tampilan seperti blog SL, silakan Copy Paste kode berikut pada langkah lima (5) > save template.

#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
background-color: #3BB3E0;
padding:  5px 10px;
position: relative;
margin: 2px;
font-size: 12px;
text-decoration: none;
color: white;
border: solid 1px #186F8F;
background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );
-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#blog-pager a:hover, .pagenavi a:hover {
background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );
}

Selamat, kini blog Sobat sudah terlihat dinamis, elegan dan tentu "fast loading".
Happy blogging.